/* Signature hero — Margin Field (split composition) */

body.ma-neo.home,
body.ma-neo.ma-home {
    overflow-x: clip;
}

@media (min-width: 992px) {
    body.ma-neo.ma-home .ma-page > .ma-section:first-of-type {
        padding-top: 16px;
    }
}

body.ma-neo .ma-sig-hero {
    --ma-sig-x: 32%;
    --ma-sig-y: 48%;
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0 16px;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    color: var(--ma-ink);
    background:
        radial-gradient(48rem 34rem at 28% 42%, rgba(0, 129, 129, 0.15), transparent 62%),
        radial-gradient(36rem 28rem at 88% 70%, rgba(50, 57, 68, 0.45), transparent 55%),
        #23282f;
    contain: layout paint style;
}

body.ma-neo .ma-sig-hero__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            30rem 24rem at var(--ma-sig-x) var(--ma-sig-y),
            rgba(0, 129, 129, 0.18) 0%,
            rgba(121, 212, 212, 0.05) 36%,
            transparent 68%
        );
    will-change: background;
}

body.ma-neo .ma-sig-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(121, 212, 212, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(121, 212, 212, 0.11) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 55% 60% at 30% 48%, #000 15%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 30% 48%, #000 15%, transparent 78%);
}

body.ma-neo .ma-sig-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    width: min(1180px, calc(100% - 48px));
    min-height: 0;
    margin-inline: auto;
    padding: 20px 0 12px;
}

/* RTL: first column = copy on the right, visual on the left */
body.ma-neo .ma-sig-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 34rem;
}

body.ma-neo .ma-sig-hero__visual {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    aspect-ratio: 720 / 640;
}

body.ma-neo .ma-services-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

body.ma-neo .ma-services-visual .ma-sig-hero__visual {
    max-width: 100%;
    width: 100%;
}

@media (min-width: 992px) {
    body.ma-neo .ma-services-visual {
        margin-bottom: 0;
    }
}

body.ma-neo .ma-sig-hero__canvas {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

body.ma-neo .ma-sig-hero__orb {
    animation: ma-sig-breathe 8s ease-in-out infinite;
    transform-origin: 360px 300px;
}

body.ma-neo .ma-sig-hero__draw--v {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
    animation: ma-sig-stroke 1.45s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.ma-neo .ma-sig-hero__draw--h {
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: ma-sig-stroke 1.35s 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.ma-neo .ma-sig-hero__board {
    transform-box: fill-box;
    transform-origin: center;
}

body.ma-neo .ma-sig-hero__board--desk {
    animation: ma-sig-float-a 9s ease-in-out infinite;
}

body.ma-neo .ma-sig-hero__board--phone {
    animation: ma-sig-float-b 11s 0.35s ease-in-out infinite;
}

body.ma-neo .ma-sig-hero__board--tablet {
    animation: ma-sig-float-b 10s 0.7s ease-in-out infinite;
}

body.ma-neo .ma-sig-hero__board--card {
    animation: ma-sig-float-a 10.5s 0.55s ease-in-out infinite;
}

body.ma-neo .ma-sig-hero__dash {
    animation: ma-sig-dash 8s linear infinite;
}

body.ma-neo .ma-sig-hero__workspace {
    opacity: 0;
    animation: ma-sig-fade 0.9s 0.15s ease forwards;
}

body.ma-neo .ma-sig-hero__brand {
    margin: 0 0 16px;
    font-family: 'pbold', sans-serif;
    font-size: clamp(40px, 5.6vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    opacity: 0;
    transform: translateY(18px);
    animation: ma-sig-rise 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.ma-neo .ma-sig-hero__title {
    margin: 0;
    max-width: 12ch;
    font-family: 'pbold', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.35;
    color: rgba(242, 244, 246, 0.92);
    font-weight: normal;
}

body.ma-neo .ma-sig-hero__title-line {
    display: block;
    opacity: 0;
    transform: translateY(18px);
    animation: ma-sig-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.ma-neo .ma-sig-hero__title-line:nth-child(1) {
    animation-delay: 0.28s;
}

body.ma-neo .ma-sig-hero__title-line--accent {
    color: var(--ma-accent);
    animation-delay: 0.4s;
}

body.ma-neo .ma-sig-hero__lead {
    margin: 22px 0 0;
    max-width: 30rem;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 2;
    color: rgba(242, 244, 246, 0.78);
    opacity: 0;
    transform: translateY(14px);
    animation: ma-sig-rise 0.85s 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ma-sig-stroke {
    to { stroke-dashoffset: 0; }
}

@keyframes ma-sig-fade {
    to { opacity: 1; }
}

@keyframes ma-sig-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ma-sig-float-a {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -9px, 0); }
}

@keyframes ma-sig-float-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 11px, 0); }
}

@keyframes ma-sig-breathe {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.045); }
}

@keyframes ma-sig-dash {
    to { stroke-dashoffset: -112; }
}

@media (max-width: 1100px) {
    body.ma-neo .ma-sig-hero__layout {
        gap: 20px;
        width: min(1180px, calc(100% - 36px));
    }

    body.ma-neo .ma-sig-hero__brand {
        font-size: clamp(36px, 5vw, 58px);
    }
}

@media (max-width: 991.98px) {
    body.ma-neo .ma-sig-hero {
        --ma-sig-x: 50%;
        --ma-sig-y: 28%;
        min-height: auto;
        margin-bottom: 12px;
        background:
            radial-gradient(36rem 26rem at 50% 18%, rgba(0, 129, 129, 0.16), transparent 64%),
            #23282f;
    }

    body.ma-neo .ma-sig-hero__layout {
        grid-template-columns: 1fr;
        gap: 4px;
        width: min(1180px, calc(100% - 32px));
        padding: 8px 0 16px;
        min-height: 0;
    }

    body.ma-neo .ma-sig-hero__visual {
        order: -1;
        max-width: 420px;
        aspect-ratio: 720 / 560;
    }

    body.ma-neo .ma-sig-hero__copy {
        max-width: none;
        padding-bottom: 8px;
    }

    body.ma-neo .ma-sig-hero__brand {
        font-size: clamp(34px, 9vw, 48px);
        margin-bottom: 12px;
    }

    body.ma-neo .ma-sig-hero__title {
        max-width: 13ch;
        font-size: clamp(22px, 5.6vw, 30px);
    }

    body.ma-neo .ma-sig-hero__lead {
        max-width: 28rem;
        font-size: 15px;
        line-height: 1.9;
    }

    body.ma-neo .ma-sig-hero__grid {
        opacity: 0.12;
        mask-image: radial-gradient(ellipse 80% 45% at 50% 18%, #000 12%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 80% 45% at 50% 18%, #000 12%, transparent 75%);
    }
}

@media (max-width: 560px) {
    body.ma-neo .ma-sig-hero__layout {
        padding: 4px 0 12px;
    }

    body.ma-neo .ma-sig-hero__visual {
        max-width: 100%;
    }

    body.ma-neo .ma-sig-hero__board--tablet {
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ma-neo .ma-sig-hero__draw--v,
    body.ma-neo .ma-sig-hero__draw--h,
    body.ma-neo .ma-sig-hero__brand,
    body.ma-neo .ma-sig-hero__title-line,
    body.ma-neo .ma-sig-hero__lead,
    body.ma-neo .ma-sig-hero__board--desk,
    body.ma-neo .ma-sig-hero__board--phone,
    body.ma-neo .ma-sig-hero__board--tablet,
    body.ma-neo .ma-sig-hero__board--card,
    body.ma-neo .ma-sig-hero__orb,
    body.ma-neo .ma-sig-hero__dash,
    body.ma-neo .ma-sig-hero__workspace {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }

    body.ma-neo .ma-sig-hero__glow {
        will-change: auto;
    }
}