/* ========================================================= */
/*                                                         */
/*               ARS GLOBAL VISUAL DNA                     */
/*          SHARED DESIGN SYSTEM — ALL ARS PAGES           */
/*                                                         */
/*  ARS HERITAGE GROUP • ARS DESIGN • ARS COMPANY          */
/*  ARS BRAIN • ROSE AI • ZHR NAJI • ALL FUTURE PAGES      */
/*                                                         */
/* ========================================================= */


/* ========================================================= */
/* 01 — GLOBAL COLOR DNA                                    */
/* ========================================================= */

:root{

    /* ----------------------------------------------------- */
    /* CORE BLACK                                             */
    /* ----------------------------------------------------- */

    --ars-black:
        #000000;

    --ars-black-deep:
        #010101;

    --ars-black-surface:
        #030405;


    /* ----------------------------------------------------- */
    /* DEEP NAVY                                              */
    /* ----------------------------------------------------- */

    --ars-navy-deep:
        #020712;

    --ars-navy:
        #06101f;

    --ars-navy-soft:
        #0a1728;


    /* ----------------------------------------------------- */
    /* GOLD                                                   */
    /* ----------------------------------------------------- */

    --ars-gold:
        #c49a4a;

    --ars-gold-light:
        #e6c77a;

    --ars-gold-bright:
        #f3d995;

    --ars-gold-dark:
        #8d6729;


    /* ----------------------------------------------------- */
    /* BRONZE                                                 */
    /* ----------------------------------------------------- */

    --ars-bronze:
        #8f6238;

    --ars-bronze-light:
        #b4875a;

    --ars-bronze-dark:
        #4a2e1c;


    /* ----------------------------------------------------- */
    /* WHITE                                                  */
    /* ----------------------------------------------------- */

    --ars-white:
        #ffffff;

    --ars-white-soft:
        #f4f1e8;

    --ars-white-muted:
        #c8c6bf;


    /* ----------------------------------------------------- */
    /* TECHNOLOGY BLUE                                        */
    /* ----------------------------------------------------- */

    --ars-blue:
        #174b82;

    --ars-blue-light:
        #4d91d1;

    --ars-blue-glow:
        rgba(45,130,220,.35);


    /* ----------------------------------------------------- */
    /* ENERGY RED                                             */
    /* ----------------------------------------------------- */

    --ars-red:
        #7d2024;

    --ars-red-light:
        #bd4b4f;

    --ars-red-glow:
        rgba(180,50,55,.22);


    /* ----------------------------------------------------- */
    /* ENERGY YELLOW                                          */
    /* ----------------------------------------------------- */

    --ars-yellow:
        #d7ad3f;

    --ars-yellow-light:
        #f1d36e;

    --ars-yellow-glow:
        rgba(235,190,65,.25);


    /* ----------------------------------------------------- */
    /* EARTH BROWN                                            */
    /* ----------------------------------------------------- */

    --ars-brown:
        #4a3020;

    --ars-brown-light:
        #806047;


    /* ----------------------------------------------------- */
    /* GLOBAL TEXT                                            */
    /* ----------------------------------------------------- */

    --ars-text:
        #f4f1e8;

    --ars-text-soft:
        rgba(244,241,232,.78);

    --ars-text-muted:
        rgba(244,241,232,.56);


    /* ----------------------------------------------------- */
    /* GLOBAL BORDERS                                         */
    /* ----------------------------------------------------- */

    --ars-border:
        rgba(255,255,255,.10);

    --ars-border-gold:
        rgba(196,154,74,.40);

    --ars-border-gold-bright:
        rgba(230,199,122,.70);


    /* ----------------------------------------------------- */
    /* GLOBAL GLASS                                           */
    /* ----------------------------------------------------- */

    --ars-glass-dark:
        rgba(2,7,15,.76);

    --ars-glass-navy:
        rgba(5,15,29,.68);

    --ars-glass-light:
        rgba(255,255,255,.075);

    --ars-glass-gold:
        rgba(196,154,74,.10);


    /* ----------------------------------------------------- */
    /* GLOBAL SHADOWS                                         */
    /* ----------------------------------------------------- */

    --ars-shadow-black:
        0 25px 80px rgba(0,0,0,.70);

    --ars-shadow-gold:
        0 20px 70px rgba(160,115,35,.18);

    --ars-shadow-blue:
        0 20px 70px rgba(25,85,150,.16);

    --ars-shadow-red:
        0 20px 70px rgba(130,25,30,.12);

}


/* ========================================================= */
/* 02 — GLOBAL RESET                                         */
/* ========================================================= */

html{

    width:100%;

    min-height:100%;

    margin:0;

    padding:0;

    background:
        #000000;

    overflow-x:hidden;

    scroll-behavior:smooth;

}


body{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:
        #000000;

    color:
        var(--ars-text);

    overflow-x:hidden;

    font-family:

        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


*,
*::before,
*::after{

    box-sizing:
        border-box;

}


img,
video,
svg,
canvas{

    display:
        block;

    max-width:
        100%;

}


a{

    color:
        inherit;

    text-decoration:
        none;

}


button,
a{

    -webkit-tap-highlight-color:
        transparent;

}


/* ========================================================= */
/* 03 — GLOBAL PAGE BACKGROUND                               */
/* ========================================================= */

body{

    position:
        relative;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(20,38,65,.16),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 35%,
            rgba(196,154,74,.035),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(23,75,130,.035),
            transparent 32%
        ),

        #000000;

}


/* ========================================================= */
/* 04 — CINEMATIC GLOBAL LIGHT FIELD                         */
/* ========================================================= */

body::before{

    content:"";

    position:
        fixed;

    inset:
        -35%;

    z-index:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at 25% 20%,
            rgba(196,154,74,.055),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 75% 60%,
            rgba(23,75,130,.045),
            transparent 32%
        ),

        radial-gradient(
            ellipse at 50% 100%,
            rgba(125,32,36,.025),
            transparent 28%
        );

    animation:

        arsGlobalAtmosphere
        22s
        ease-in-out
        infinite
        alternate;

}


@keyframes arsGlobalAtmosphere{

    0%{

        transform:
            translate3d(-2%,-1%,0)
            scale(1);

        opacity:
            .55;

    }

    50%{

        transform:
            translate3d(2%,2%,0)
            scale(1.04);

        opacity:
            .85;

    }

    100%{

        transform:
            translate3d(-1%,3%,0)
            scale(1.08);

        opacity:
            .65;

    }

}


/* ========================================================= */
/* 05 — GLOBAL PAGE ROOT                                     */
/* ========================================================= */

section,
header,
footer,
main,
nav{

    position:
        relative;

    max-width:
        100%;

}


.ars-group-page,
.ars-company-page,
.ars-design-page,
.ars-brain-page,
.ars-future-page{

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        100%;

    overflow:
        hidden;

}


/* ========================================================= */
/* 06 — GLOBAL CONTAINER                                     */
/* ========================================================= */

.container{

    width:
        min(1400px, 90%);

    max-width:
        100%;

    margin-left:
        auto;

    margin-right:
        auto;

    position:
        relative;

    z-index:
        2;

}


/* ========================================================= */
/* 07 — GLOBAL SECTION                                      */
/* ========================================================= */

section{

    width:
        100%;

    padding:

        clamp(
            90px,
            9vw,
            170px
        )
        0;

    isolation:
        isolate;

}


/* ========================================================= */
/* 08 — GLOBAL SECTION HEADER                                */
/* ========================================================= */

.section-header{

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    max-width:
        1000px;

    margin:

        0
        auto
        70px;

    text-align:
        center;

}


.section-label{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    padding:

        8px
        18px;

    border:

        1px
        solid
        var(--ars-border-gold);

    border-radius:
        999px;

    color:
        var(--ars-gold-light);

    background:

        rgba(5,12,22,.55);

    backdrop-filter:
        blur(14px);

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

    box-shadow:

        0
        0
        25px
        rgba(196,154,74,.05);

    font-size:
        .70rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.section-header h2{

    margin:
        0;

    color:
        var(--ars-white-soft);

    font-size:

        clamp(
            2rem,
            4vw,
            4rem
        );

    line-height:
        1.12;

    letter-spacing:
        -.025em;

}


.section-header p{

    max-width:
        780px;

    margin:

        25px
        auto
        0;

    color:
        var(--ars-text-soft);

    line-height:
        1.9;

}


/* ========================================================= */
/* 09 — UNIVERSAL ARS GLASS SYSTEM                           */
/* ========================================================= */

.ars-glass{

    position:
        relative;

    overflow:
        hidden;

    border:

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

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter:

        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(24px)
        saturate(125%);

    box-shadow:

        var(--ars-shadow-black),

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

    transition:

        transform .6s cubic-bezier(.2,.8,.2,1),

        border-color .5s ease,

        box-shadow .5s ease,

        background .5s ease;

}


/* ========================================================= */
/* 10 — GLASS LIGHT REFLECTION                               */
/* ========================================================= */

.ars-glass::before{

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.09) 45%,
            transparent 70%
        );

    transform:
        translateX(-120%);

    transition:
        transform 1.2s ease;

}


.ars-glass:hover::before{

    transform:
        translateX(120%);

}


/* ========================================================= */
/* 11 — GLASS HOVER                                         */
/* ========================================================= */

.ars-glass:hover{

    transform:
        translateY(-10px);

    border-color:
        var(--ars-border-gold-bright);

    box-shadow:

        0
        30px
        90px
        rgba(0,0,0,.78),

        0
        0
        35px
        rgba(196,154,74,.10),

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

}


/* ========================================================= */
/* 12 — GLASS VARIANTS                                      */
/* ========================================================= */

.ars-glass-dark{

    background:

        linear-gradient(
            135deg,
            rgba(0,0,0,.88),
            rgba(4,9,17,.72)
        );

}


.ars-glass-navy{

    background:

        linear-gradient(
            135deg,
            rgba(5,15,29,.82),
            rgba(2,7,14,.65)
        );

    border-color:

        rgba(38,91,145,.25);

}


.ars-glass-gold{

    background:

        linear-gradient(
            135deg,
            rgba(196,154,74,.16),
            rgba(5,13,24,.70)
        );

    border-color:

        rgba(196,154,74,.32);

}


.ars-glass-bronze{

    background:

        linear-gradient(
            135deg,
            rgba(143,98,56,.16),
            rgba(3,7,12,.75)
        );

    border-color:

        rgba(143,98,56,.30);

}


.ars-glass-blue{

    background:

        linear-gradient(
            135deg,
            rgba(23,75,130,.16),
            rgba(2,8,17,.76)
        );

    border-color:

        rgba(77,145,209,.22);

}


.ars-glass-red{

    background:

        linear-gradient(
            135deg,
            rgba(125,32,36,.13),
            rgba(3,7,12,.78)
        );

    border-color:

        rgba(189,75,79,.20);

}


.ars-glass-bright{

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.035)
        );

}


.ars-glass-flat{

    box-shadow:

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

}


.ars-glass-floating{

    box-shadow:

        0
        30px
        100px
        rgba(0,0,0,.75),

        0
        0
        40px
        rgba(196,154,74,.08);

}


/* ========================================================= */
/* 13 — GOLD TYPOGRAPHY                                     */
/* ========================================================= */

.gold-text{

    background:

        linear-gradient(
            120deg,
            var(--ars-gold-dark),
            var(--ars-gold-light),
            var(--ars-gold),
            var(--ars-gold-bright)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


h1,
h2,
h3,
h4{

    text-wrap:
        balance;

}


h1,
h2,
h3{

    color:
        var(--ars-white-soft);

}


/* ========================================================= */
/* 14 — UNIVERSAL ARS BUTTONS                               */
/* ========================================================= */

.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:

        0
        28px;

    border-radius:
        999px;

    font-size:
        .84rem;

    font-weight:
        600;

    letter-spacing:
        .04em;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease,

        border-color .4s ease;

}


.btn-primary{

    color:
        #090909;

    background:

        linear-gradient(
            135deg,
            #9e742c,
            #e5c477,
            #b7842e
        );

    box-shadow:

        0
        10px
        35px
        rgba(196,154,74,.20);

}


.btn-secondary{

    color:
        var(--ars-gold-light);

    border:

        1px
        solid
        var(--ars-border-gold);

    background:

        rgba(4,11,20,.60);

    backdrop-filter:
        blur(14px);

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

}


.btn-primary:hover,
.btn-secondary:hover{

    transform:
        translateY(-4px);

    box-shadow:

        0
        15px
        45px
        rgba(196,154,74,.28);

}


/* ========================================================= */
/* 15 — GOLD CINEMATIC SCROLL INDICATOR                     */
/* ========================================================= */

.ars-scroll-line{

    position:
        fixed;

    right:
        24px;

    top:
        50%;

    width:
        2px;

    height:
        100px;

    transform:
        translateY(-50%);

    z-index:
        100;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--ars-gold-light),
            transparent
        );

    opacity:
        .65;

    animation:

        arsScrollGlow
        2.5s
        ease-in-out
        infinite;

}


@keyframes arsScrollGlow{

    0%,
    100%{

        opacity:
            .30;

        box-shadow:
            0
            0
            5px
            rgba(230,199,122,.15);

    }

    50%{

        opacity:
            1;

        box-shadow:
            0
            0
            22px
            rgba(230,199,122,.70);

    }

}


/* ========================================================= */
/* 16 — UNIVERSAL FOCUS                                     */
/* ========================================================= */

a:focus-visible,
button:focus-visible{

    outline:

        2px
        solid
        var(--ars-gold-light);

    outline-offset:
        5px;

}


/* ========================================================= */
/* 17 — RESPONSIVE DNA                                      */
/* ========================================================= */

@media (max-width:1024px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            100px 0;

    }

}


@media (max-width:768px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            80px 0;

    }

    .section-header{

        margin-bottom:
            50px;

    }

    .section-header h2{

        font-size:

            clamp(
                1.8rem,
                8vw,
                3rem
            );

    }

    .btn-primary,
    .btn-secondary{

        width:
            100%;

    }

}


@media (max-width:480px){

    .container{

        width:
            92%;

    }

    section{

        padding:
            70px 0;

    }

    .section-label{

        font-size:
            .62rem;

        letter-spacing:
            .12em;

    }

}


/* ========================================================= */
/* 18 — MOBILE OVERFLOW PROTECTION                          */
/* ========================================================= */

@media (max-width:768px){

    html,
    body{

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;

    }

    .ars-glass{

        max-width:
            100%;

        min-width:
            0;

    }

}


/* ========================================================= */
/* 19 — REDUCED MOTION                                      */
/* ========================================================= */

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

    *,
    *::before,
    *::after{

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}
/* ========================================================= */
/* 01 — ROSE AI IMMERSIVE INTELLIGENCE ENVIRONMENT          */
/* ========================================================= */
/* 01.1 — ROSE AI WORLD                                     */
/* 01.2 — NON-HUMAN DIGITAL ENVIRONMENT                     */
/* 01.3 — AI-ONLY VISUAL IDENTITY                           */
/* 01.4 — ROBOTIC / ARTIFICIAL INTELLIGENCE ATMOSPHERE      */
/* 01.5 — DEEP COMPUTATIONAL BACKGROUND                     */
/* 01.6 — AI CORE ENVIRONMENT                               */
/* 01.7 — AMBIENT INTELLIGENCE LAYERS                       */
/* 01.8 — DYNAMIC DIGITAL SPACE                             */
/* 01.9 — RESPONSIVE ENVIRONMENT                            */
/* ========================================================= */


/* ========================================================= */
/* 01.1 — ROSE AI WORLD                                     */
/* ========================================================= */

.rose-ai-world{

    position:relative;

    min-height:100vh;

    width:100%;

    overflow:hidden;

    isolation:isolate;

    background:

        radial-gradient(
            circle at 50% 42%,
            rgba(255,255,255,.055),
            transparent 22%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(126,92,255,.065),
            transparent 48%
        ),

        linear-gradient(
            180deg,
            #030407 0%,
            #05070b 48%,
            #020306 100%
        );

    color:#f5f5f7;

}


/* ========================================================= */
/* 01.2 — NON-HUMAN DIGITAL ENVIRONMENT                     */
/* ========================================================= */

.rose-ai-world::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-3;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.018) 50%,
            transparent 100%
        );

    opacity:.9;

}


.rose-ai-world::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:

        72px 72px,

        72px 72px;

    mask-image:

        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.85) 42%,
            transparent 82%
        );

    -webkit-mask-image:

        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.85) 42%,
            transparent 82%
        );

    opacity:.42;

}


/* ========================================================= */
/* 01.3 — AI-ONLY VISUAL IDENTITY                           */
/* ========================================================= */

.rose-ai-world .ai-identity-layer{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.025),
            transparent 20%
        ),

        radial-gradient(
            circle at 80% 65%,
            rgba(255,255,255,.022),
            transparent 24%
        );

    animation:

        roseAmbientDrift
        18s
        ease-in-out
        infinite
        alternate;

}


@keyframes roseAmbientDrift{

    0%{

        transform:
            scale(1)
            translate3d(0,0,0);

        opacity:.55;

    }

    100%{

        transform:
            scale(1.08)
            translate3d(0,-1.5%,0);

        opacity:1;

    }

}


/* ========================================================= */
/* 01.4 — ROBOTIC / ARTIFICIAL INTELLIGENCE ATMOSPHERE      */
/* ========================================================= */

.rose-ai-world .robotic-atmosphere{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

    overflow:hidden;

}


.rose-ai-world .robotic-atmosphere::before{

    content:"";

    position:absolute;

    width:65vw;

    height:65vw;

    min-width:520px;

    min-height:520px;

    max-width:1100px;

    max-height:1100px;

    left:50%;

    top:45%;

    transform:
        translate(-50%,-50%);

    border:

        1px solid
        rgba(255,255,255,.035);

    border-radius:50%;

    box-shadow:

        0 0 0 1px
        rgba(255,255,255,.012),

        0 0 80px
        rgba(255,255,255,.025),

        inset 0 0 80px
        rgba(255,255,255,.018);

    animation:

        roseCoreBreath
        8s
        ease-in-out
        infinite;

}


@keyframes roseCoreBreath{

    0%,
    100%{

        transform:
            translate(-50%,-50%)
            scale(.96);

        opacity:.45;

    }

    50%{

        transform:
            translate(-50%,-50%)
            scale(1.02);

        opacity:.8;

    }

}


/* ========================================================= */
/* 01.5 — DEEP COMPUTATIONAL BACKGROUND                     */
/* ========================================================= */

.rose-ai-world .computational-background{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    opacity:.55;

}


.rose-ai-world .computational-background span{

    position:absolute;

    display:block;

    width:1px;

    height:1px;

    border-radius:50%;

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

    box-shadow:

        0 0 8px
        rgba(255,255,255,.25);

    animation:

        roseDataParticle
        var(--particle-duration,8s)
        linear
        infinite;

    animation-delay:

        var(--particle-delay,0s);

}


@keyframes roseDataParticle{

    0%{

        transform:
            translate3d(
                var(--particle-x,0),
                110vh,
                0
            );

        opacity:0;

    }

    12%{

        opacity:.65;

    }

    82%{

        opacity:.3;

    }

    100%{

        transform:
            translate3d(
                var(--particle-x,0),
                -10vh,
                0
            );

        opacity:0;

    }

}


/* ========================================================= */
/* 01.6 — AI CORE ENVIRONMENT                               */
/* ========================================================= */

.rose-ai-world .ai-core-environment{

    position:absolute;

    left:50%;

    top:50%;

    width:min(72vw,900px);

    aspect-ratio:1;

    transform:
        translate(-50%,-50%);

    pointer-events:none;

    z-index:-1;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.035) 0%,
            rgba(255,255,255,.015) 24%,
            transparent 62%
        );

    filter:

        blur(.2px);

}


.rose-ai-world .ai-core-environment::before{

    content:"";

    position:absolute;

    inset:10%;

    border:

        1px solid
        rgba(255,255,255,.035);

    border-radius:50%;

    animation:

        roseCoreOrbit
        24s
        linear
        infinite;

}


.rose-ai-world .ai-core-environment::after{

    content:"";

    position:absolute;

    inset:22%;

    border:

        1px dashed
        rgba(255,255,255,.028);

    border-radius:50%;

    animation:

        roseCoreOrbitReverse
        17s
        linear
        infinite;

}


@keyframes roseCoreOrbit{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


@keyframes roseCoreOrbitReverse{

    from{

        transform:
            rotate(360deg);

    }

    to{

        transform:
            rotate(0deg);

    }

}


/* ========================================================= */
/* 01.7 — AMBIENT INTELLIGENCE LAYERS                       */
/* ========================================================= */

.rose-ai-world .ambient-intelligence{

    position:absolute;

    inset:0;

    pointer-events:none;

}


.rose-ai-world .ambient-intelligence::before{

    content:"";

    position:absolute;

    left:8%;

    top:18%;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.028),
            transparent 70%
        );

    filter:blur(20px);

    animation:

        ambientFloatOne
        12s
        ease-in-out
        infinite
        alternate;

}


.rose-ai-world .ambient-intelligence::after{

    content:"";

    position:absolute;

    right:6%;

    bottom:12%;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.022),
            transparent 70%
        );

    filter:blur(25px);

    animation:

        ambientFloatTwo
        15s
        ease-in-out
        infinite
        alternate;

}


@keyframes ambientFloatOne{

    0%{

        transform:
            translate3d(0,0,0)
            scale(.9);

    }

    100%{

        transform:
            translate3d(70px,40px,0)
            scale(1.2);

    }

}


@keyframes ambientFloatTwo{

    0%{

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    100%{

        transform:
            translate3d(-80px,-50px,0)
            scale(.82);

    }

}


/* ========================================================= */
/* 01.8 — DYNAMIC DIGITAL SPACE                             */
/* ========================================================= */

.rose-ai-world .dynamic-digital-space{

    position:relative;

    min-height:100vh;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

}


.rose-ai-world .dynamic-digital-space::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255,255,255,.012) 50%,
            transparent 100%
        );

    animation:

        digitalSpaceScan
        9s
        ease-in-out
        infinite;

}


@keyframes digitalSpaceScan{

    0%,
    100%{

        opacity:.2;

        transform:
            translateY(-3%);

    }

    50%{

        opacity:.7;

        transform:
            translateY(3%);

    }

}


/* ========================================================= */
/* 01.9 — RESPONSIVE ENVIRONMENT                            */
/* ========================================================= */

@media (max-width:1100px){

    .rose-ai-world .ai-core-environment{

        width:88vw;

    }

    .rose-ai-world::after{

        background-size:

            56px 56px,

            56px 56px;

    }

}


@media (max-width:768px){

    .rose-ai-world{

        min-height:100svh;

    }

    .rose-ai-world .ai-core-environment{

        width:120vw;

        opacity:.7;

    }

    .rose-ai-world .robotic-atmosphere::before{

        width:110vw;

        height:110vw;

        min-width:0;

        min-height:0;

    }

    .rose-ai-world::after{

        background-size:

            42px 42px,

            42px 42px;

        opacity:.3;

    }

}


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

    .rose-ai-world *,

    .rose-ai-world *::before,

    .rose-ai-world *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

    }

    }
 /* ========================================================= */
/* 02 — ROSE AI HERO / INTELLIGENCE CORE                    */
/* ========================================================= */
/* 02.1 — ROSE AI CENTRAL CORE                              */
/* 02.2 — LARGE AI INTERACTION WINDOW                       */
/* 02.3 — EMBOSSED ROSE ICON                                */
/* 02.4 — ROSE INTELLIGENCE EMBLEM                          */
/* 02.5 — ROBOTIC / AI AVATAR                               */
/* 02.6 — AI CORE GLOW                                     */
/* 02.7 — ANIMATED NEURAL CORE                              */
/* 02.8 — AI STATUS INDICATOR                               */
/* 02.9 — LIVE INTELLIGENCE STATE                           */
/* 02.10 — INTERACTIVE CORE PRESENCE                        */
/* 02.11 — VOICE / TEXT INTERACTION                         */
/* 02.12 — HUMAN-TO-AI INTERFACE                            */
/* 02.13 — PREMIUM AI HUD                                   */
/* ========================================================= */


/* ========================================================= */
/* 02.1 — ROSE AI CENTRAL CORE                              */
/* ========================================================= */

.rose-ai-world .rose-ai-central-core{

    position:relative;

    width:min(92vw,980px);

    min-height:min(76vh,760px);

    display:grid;

    grid-template-columns:
        minmax(280px,.85fr)
        minmax(420px,1.35fr);

    align-items:center;

    gap:clamp(30px,5vw,90px);

    padding:clamp(28px,5vw,72px);

    border:

        1px solid
        rgba(255,255,255,.12);

    border-radius:34px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018) 42%,
            rgba(255,255,255,.035)
        );

    box-shadow:

        0 30px 100px
        rgba(0,0,0,.55),

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

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

    backdrop-filter:

        blur(28px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(28px)
        saturate(125%);

    overflow:hidden;

    isolation:isolate;

}


.rose-ai-world .rose-ai-central-core::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 24% 48%,
            rgba(255,255,255,.055),
            transparent 26%
        ),

        radial-gradient(
            circle at 76% 52%,
            rgba(255,255,255,.035),
            transparent 34%
        );

}


.rose-ai-world .rose-ai-central-core::after{

    content:"";

    position:absolute;

    top:0;

    left:-35%;

    width:28%;

    height:100%;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    transform:

        skewX(-18deg);

    animation:

        roseHeroLightSweep
        8s
        ease-in-out
        infinite;

}


@keyframes roseHeroLightSweep{

    0%,
    65%{

        left:-35%;

        opacity:0;

    }

    72%{

        opacity:1;

    }

    88%{

        left:110%;

        opacity:0;

    }

    100%{

        left:110%;

        opacity:0;

    }

}


/* ========================================================= */
/* 02.2 — LARGE AI INTERACTION WINDOW                       */
/* ========================================================= */

.rose-ai-world .rose-ai-interaction-window{

    position:relative;

    min-height:520px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:clamp(22px,3vw,36px);

    border:

        1px solid
        rgba(255,255,255,.1);

    border-radius:26px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 20px 60px
        rgba(0,0,0,.25);

    overflow:hidden;

}


.rose-ai-world .rose-ai-interaction-window::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:

        34px 34px,

        34px 34px;

    mask-image:

        linear-gradient(
            180deg,
            black,
            transparent 85%
        );

    -webkit-mask-image:

        linear-gradient(
            180deg,
            black,
            transparent 85%
        );

}


.rose-ai-world .rose-ai-window-header{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:20px;

    border-bottom:

        1px solid
        rgba(255,255,255,.07);

}


.rose-ai-world .rose-ai-window-label{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:

        clamp(.68rem,.7vw,.78rem);

    letter-spacing:

        .22em;

    text-transform:

        uppercase;

    color:

        rgba(255,255,255,.65);

}


.rose-ai-world .rose-ai-window-label::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:

        rgba(255,255,255,.9);

    box-shadow:

        0 0 12px
        rgba(255,255,255,.65);

    animation:

        roseLiveDot
        2s
        ease-in-out
        infinite;

}


@keyframes roseLiveDot{

    0%,
    100%{

        opacity:.35;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.15);

    }

}


/* ========================================================= */
/* 02.3 — EMBOSSED ROSE ICON                                */
/* ========================================================= */

.rose-ai-world .rose-embossed-icon{

    position:relative;

    width:clamp(180px,18vw,270px);

    aspect-ratio:1;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035) 38%,
            rgba(0,0,0,.2) 72%
        );

    border:

        1px solid
        rgba(255,255,255,.12);

    box-shadow:

        inset 0 3px 8px
        rgba(255,255,255,.08),

        inset 0 -12px 25px
        rgba(0,0,0,.35),

        0 20px 70px
        rgba(0,0,0,.45);

    transform:

        translateZ(0);

}


.rose-ai-world .rose-embossed-icon::before{

    content:"🌹";

    font-size:

        clamp(4rem,8vw,7rem);

    filter:

        grayscale(1)
        brightness(1.65);

    opacity:.88;

    text-shadow:

        0 3px 0
        rgba(0,0,0,.5),

        0 0 25px
        rgba(255,255,255,.22);

    transform:

        translateY(-3px);

}


.rose-ai-world .rose-embossed-icon::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:

        1px solid
        rgba(255,255,255,.055);

    box-shadow:

        0 0 40px
        rgba(255,255,255,.04);

}


/* ========================================================= */
/* 02.4 — ROSE INTELLIGENCE EMBLEM                          */
/* ========================================================= */

.rose-ai-world .rose-intelligence-emblem{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    margin-top:24px;

    text-align:center;

}


.rose-ai-world .rose-intelligence-emblem strong{

    font-size:

        clamp(1.8rem,3vw,3rem);

    font-weight:500;

    letter-spacing:

        .28em;

    padding-left:

        .28em;

    color:

        rgba(255,255,255,.92);

}


.rose-ai-world .rose-intelligence-emblem span{

    font-size:

        .65rem;

    letter-spacing:

        .3em;

    text-transform:

        uppercase;

    color:

        rgba(255,255,255,.42);

}


/* ========================================================= */
/* 02.5 — ROBOTIC / AI AVATAR                               */
/* ========================================================= */

.rose-ai-world .rose-ai-avatar{

    position:relative;

    width:100%;

    max-width:360px;

    aspect-ratio:1;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

}


.rose-ai-world .rose-ai-avatar::before{

    content:"";

    position:absolute;

    inset:16%;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 50% 38%,
            rgba(255,255,255,.1),
            rgba(255,255,255,.02) 45%,
            transparent 70%
        );

    border:

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

    box-shadow:

        inset 0 0 40px
        rgba(255,255,255,.035),

        0 0 60px
        rgba(255,255,255,.04);

}


.rose-ai-world .rose-ai-avatar::after{

    content:"AI";

    position:absolute;

    font-family:

        "Courier New",
        monospace;

    font-size:

        clamp(2rem,4vw,4rem);

    font-weight:700;

    letter-spacing:

        .18em;

    color:

        rgba(255,255,255,.72);

    text-shadow:

        0 0 20px
        rgba(255,255,255,.25);

}


/* ========================================================= */
/* 02.6 — AI CORE GLOW                                     */
/* ========================================================= */

.rose-ai-world .ai-core-glow{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.1) 0%,
            rgba(255,255,255,.035) 25%,
            transparent 68%
        );

    filter:

        blur(20px);

    opacity:.65;

    animation:

        aiCoreGlowPulse
        4.5s
        ease-in-out
        infinite;

}


@keyframes aiCoreGlowPulse{

    0%,
    100%{

        transform:scale(.88);

        opacity:.35;

    }

    50%{

        transform:scale(1.08);

        opacity:.8;

    }

}


/* ========================================================= */
/* 02.7 — ANIMATED NEURAL CORE                              */
/* ========================================================= */

.rose-ai-world .animated-neural-core{

    position:absolute;

    inset:5%;

    border-radius:50%;

    border:

        1px solid
        rgba(255,255,255,.045);

    animation:

        neuralCoreRotate
        20s
        linear
        infinite;

}


.rose-ai-world .animated-neural-core::before{

    content:"";

    position:absolute;

    width:9px;

    height:9px;

    top:4%;

    left:50%;

    border-radius:50%;

    background:

        rgba(255,255,255,.9);

    box-shadow:

        0 0 18px
        rgba(255,255,255,.7);

}


.rose-ai-world .animated-neural-core::after{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    right:8%;

    top:48%;

    border-radius:50%;

    background:

        rgba(255,255,255,.7);

    box-shadow:

        0 0 14px
        rgba(255,255,255,.5);

}


@keyframes neuralCoreRotate{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


/* ========================================================= */
/* 02.8 — AI STATUS INDICATOR                               */
/* ========================================================= */

.rose-ai-world .ai-status-indicator{

    display:flex;

    align-items:center;

    gap:10px;

    font-family:

        "Courier New",
        monospace;

    font-size:

        .68rem;

    letter-spacing:

        .16em;

    text-transform:

        uppercase;

    color:

        rgba(255,255,255,.55);

}


.rose-ai-world .ai-status-indicator::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:

        rgba(255,255,255,.8);

    box-shadow:

        0 0 14px
        rgba(255,255,255,.65);

    animation:

        aiStatusPulse
        1.8s
        ease-in-out
        infinite;

}


@keyframes aiStatusPulse{

    0%,
    100%{

        transform:scale(.75);

        opacity:.35;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

}


/* ========================================================= */
/* 02.9 — LIVE INTELLIGENCE STATE                           */
/* ========================================================= */

.rose-ai-world .live-intelligence-state{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:10px;

    margin-top:20px;

}


.rose-ai-world .live-intelligence-state span{

    padding:

        10px 12px;

    border:

        1px solid
        rgba(255,255,255,.055);

    border-radius:8px;

    background:

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

    font-family:

        "Courier New",
        monospace;

    font-size:

        .58rem;

    letter-spacing:

        .12em;

    text-align:center;

    color:

        rgba(255,255,255,.42);

    animation:

        intelligenceStateBlink
        3.5s
        ease-in-out
        infinite;

}


.rose-ai-world .live-intelligence-state span:nth-child(2){

    animation-delay:

        .8s;

}


.rose-ai-world .live-intelligence-state span:nth-child(3){

    animation-delay:

        1.6s;

}


@keyframes intelligenceStateBlink{

    0%,
    100%{

        opacity:.35;

        border-color:
            rgba(255,255,255,.04);

    }

    50%{

        opacity:.95;

        border-color:
            rgba(255,255,255,.14);

        box-shadow:

            0 0 18px
            rgba(255,255,255,.025);

    }

}


/* ========================================================= */
/* 02.10 — INTERACTIVE CORE PRESENCE                        */
/* ========================================================= */

.rose-ai-world .interactive-core-presence{

    cursor:pointer;

    transition:

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

        border-color .5s ease,

        box-shadow .5s ease;

}


.rose-ai-world .interactive-core-presence:hover{

    transform:

        translateY(-6px);

    border-color:

        rgba(255,255,255,.18);

    box-shadow:

        0 40px 120px
        rgba(0,0,0,.6),

        inset 0 1px 0
        rgba(255,255,255,.14),

        0 0 50px
        rgba(255,255,255,.035);

}


.rose-ai-world .interactive-core-presence:active{

    transform:

        translateY(-2px)
        scale(.995);

}


/* ========================================================= */
/* 02.11 — VOICE / TEXT INTERACTION                         */
/* ========================================================= */

.rose-ai-world .rose-interaction-controls{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:20px;

}


.rose-ai-world .rose-interaction-input{

    flex:1;

    min-width:0;

    height:54px;

    padding:

        0 18px;

    border:

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

    border-radius:14px;

    outline:none;

    background:

        rgba(0,0,0,.24);

    color:

        rgba(255,255,255,.85);

    font:

        inherit;

    transition:

        border-color .3s ease,

        box-shadow .3s ease;

}


.rose-ai-world .rose-interaction-input::placeholder{

    color:

        rgba(255,255,255,.28);

}


.rose-ai-world .rose-interaction-input:focus{

    border-color:

        rgba(255,255,255,.2);

    box-shadow:

        0 0 0 4px
        rgba(255,255,255,.025),

        0 0 30px
        rgba(255,255,255,.025);

}


.rose-ai-world .rose-voice-button,
.rose-ai-world .rose-send-button{

    width:54px;

    height:54px;

    flex:0 0 54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:

        1px solid
        rgba(255,255,255,.1);

    border-radius:14px;

    background:

        rgba(255,255,255,.045);

    color:

        rgba(255,255,255,.8);

    cursor:pointer;

    transition:

        transform .3s ease,

        background .3s ease,

        border-color .3s ease;

}


.rose-ai-world .rose-voice-button:hover,
.rose-ai-world .rose-send-button:hover{

    transform:

        translateY(-2px);

    background:

        rgba(255,255,255,.09);

    border-color:

        rgba(255,255,255,.2);

}


/* ========================================================= */
/* 02.12 — HUMAN-TO-AI INTERFACE                            */
/* ========================================================= */

.rose-ai-world .human-to-ai-interface{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:14px;

    max-height:250px;

    overflow:auto;

    padding-right:6px;

    scrollbar-width:thin;

    scrollbar-color:

        rgba(255,255,255,.15)
        transparent;

}


.rose-ai-world .human-to-ai-interface::-webkit-scrollbar{

    width:4px;

}


.rose-ai-world .human-to-ai-interface::-webkit-scrollbar-thumb{

    background:

        rgba(255,255,255,.15);

    border-radius:10px;

}


.rose-ai-world .ai-message,
.rose-ai-world .human-message{

    max-width:82%;

    padding:

        13px 16px;

    border-radius:15px;

    font-size:

        .82rem;

    line-height:

        1.65;

    animation:

        messageAppear
        .6s
        ease
        both;

}


.rose-ai-world .human-message{

    align-self:flex-end;

    border:

        1px solid
        rgba(255,255,255,.07);

    background:

        rgba(255,255,255,.035);

    color:

        rgba(255,255,255,.65);

}


.rose-ai-world .ai-message{

    align-self:flex-start;

    border-left:

        2px solid
        rgba(255,255,255,.45);

    background:

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

    color:

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

}


@keyframes messageAppear{

    from{

        opacity:0;

        transform:
            translateY(8px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ========================================================= */
/* 02.13 — PREMIUM AI HUD                                   */
/* ========================================================= */

.rose-ai-world .premium-ai-hud{

    position:absolute;

    inset:18px;

    pointer-events:none;

    border:

        1px solid
        rgba(255,255,255,.035);

    border-radius:20px;

}


.rose-ai-world .premium-ai-hud::before,
.rose-ai-world .premium-ai-hud::after{

    content:"";

    position:absolute;

    width:28px;

    height:28px;

    border-color:

        rgba(255,255,255,.22);

    border-style:solid;

}


.rose-ai-world .premium-ai-hud::before{

    top:-1px;

    left:-1px;

    border-width:

        1px 0 0 1px;

}


.rose-ai-world .premium-ai-hud::after{

    right:-1px;

    bottom:-1px;

    border-width:

        0 1px 1px 0;

}


@media (max-width:900px){

    .rose-ai-world .rose-ai-central-core{

        grid-template-columns:

            1fr;

        min-height:auto;

    }

    .rose-ai-world .rose-ai-avatar{

        max-width:280px;

    }

}


@media (max-width:600px){

    .rose-ai-world .rose-ai-central-core{

        width:calc(100% - 24px);

        padding:24px 18px;

        border-radius:24px;

    }

    .rose-ai-world .rose-ai-interaction-window{

        min-height:500px;

        padding:18px;

        border-radius:20px;

    }

    .rose-ai-world .rose-ai-interaction-controls{

        flex-wrap:wrap;

    }

    .rose-ai-world .rose-interaction-input{

        flex-basis:100%;

        order:1;

    }

    .rose-ai-world .rose-voice-button{

        order:2;

    }

    .rose-ai-world .rose-send-button{

        order:3;

    }

    .rose-ai-world .live-intelligence-state{

        grid-template-columns:1fr;

    }

}


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

    .rose-ai-world .rose-ai-central-core::after,
    .rose-ai-world .rose-ai-window-label::before,
    .rose-ai-world .ai-core-glow,
    .rose-ai-world .animated-neural-core,
    .rose-ai-world .ai-status-indicator::before,
    .rose-ai-world .live-intelligence-state span{

        animation:none !important;

    }

}
/* ========================================================= /
/ 03 — ROSE AI CONVERSATIONAL INTERFACE                     /
/ ROSE AI — SPECIALIZED PAGE CSS                            /
/ ========================================================= /
/ 03.1 — AI Chat Interface                                  /
/ 03.2 — ROSE Conversation Panel                            /
/ 03.3 — Large Technical Chat Window                        /
/ 03.4 — User Message System                                /
/ 03.5 — ROSE Response System                               /
/ 03.6 — Typing Indicator                                   /
/ 03.7 — AI Thinking State                                  /
/ 03.8 — Voice Input Interface                              /
/ 03.9 — Text Input Interface                               /
/ 03.10 — Send / Microphone Controls                        /
/ 03.11 — Conversation History                              /
/ 03.12 — AI Response Animation                             /
/ 03.13 — Dynamic Message Reveal                            /
/ 03.14 — Intelligent Scroll System                         /
/ ========================================================= */

/* ========================================================= /
/ 03.1 — AI CHAT INTERFACE                                  /
/ ========================================================= */

.rose-ai-chat-interface{
position:relative;
width:100%;
max-width:1100px;
margin:clamp(48px,7vw,110px) auto 0;
isolation:isolate;
}

.rose-ai-chat-interface::before{
content:"";
position:absolute;
inset:-15%;
z-index:-2;
pointer-events:none;
background:
radial-gradient(
circle at 50% 45%,
rgba(214,164,77,.16),
transparent 35%
),
radial-gradient(
circle at 15% 80%,
rgba(118,91,255,.10),
transparent 30%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.06),
transparent 28%
);
filter:blur(35px);
}

.rose-ai-chat-interface::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.28;
background-image:
linear-gradient(
rgba(255,255,255,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.035) 1px,
transparent 1px
);
background-size:
36px 36px,
36px 36px;
mask-image:
linear-gradient(
to bottom,
transparent,
black 12%,
black 88%,
transparent
);
}

/* ========================================================= /
/ 03.2 — ROSE CONVERSATION PANEL                            /
/ ========================================================= */

.rose-conversation-panel{
position:relative;
display:flex;
flex-direction:column;
min-height:680px;
overflow:hidden;
border:1px solid rgba(255,255,255,.13);
border-radius:32px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025)
),
rgba(7,9,14,.72);
backdrop-filter:
blur(28px)
saturate(145%);
-webkit-backdrop-filter:
blur(28px)
saturate(145%);
box-shadow:
0 35px 100px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(0,0,0,.35);
}

.rose-conversation-panel::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:
linear-gradient(
120deg,
rgba(255,255,255,.08),
transparent 25%,
transparent 70%,
rgba(214,164,77,.055)
);
}

.rose-conversation-panel::after{
content:"";
position:absolute;
top:0;
left:12%;
right:12%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
rgba(214,164,77,.55),
transparent
);
opacity:.7;
}

/* ========================================================= /
/ 03.3 — LARGE TECHNICAL CHAT WINDOW                        /
/ ========================================================= */

.rose-chat-window{
position:relative;
flex:1;
min-height:480px;
overflow:hidden;
display:flex;
flex-direction:column;
}

.rose-chat-window-header{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 26px;
border-bottom:1px solid rgba(255,255,255,.08);
background:
linear-gradient(
180deg,
rgba(255,255,255,.045),
rgba(255,255,255,.012)
);
}

.rose-chat-window-identity{
display:flex;
align-items:center;
gap:14px;
}

.rose-chat-avatar{
position:relative;
width:44px;
height:44px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:50%;
border:1px solid rgba(214,164,77,.45);
background:
radial-gradient(
circle at 35% 30%,
rgba(255,255,255,.22),
transparent 28%
),
radial-gradient(
circle,
rgba(214,164,77,.24),
rgba(214,164,77,.035) 65%,
transparent 70%
);
box-shadow:
0 0 25px rgba(214,164,77,.16),
inset 0 0 18px rgba(214,164,77,.10);
}

.rose-chat-avatar::before{
content:"";
position:absolute;
inset:6px;
border:1px solid rgba(255,255,255,.18);
border-radius:50%;
}

.rose-chat-avatar::after{
content:"🌹";
position:relative;
font-size:17px;
filter:
drop-shadow(
0 0 8px
rgba(214,164,77,.55)
);
}

.rose-chat-identity-text{
display:flex;
flex-direction:column;
gap:3px;
}

.rose-chat-identity-name{
font-size:.86rem;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
}

.rose-chat-identity-state{
display:flex;
align-items:center;
gap:7px;
color:rgba(255,255,255,.48);
font-size:.68rem;
letter-spacing:.12em;
text-transform:uppercase;
}

.rose-chat-identity-state::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:#72e6a0;
box-shadow:
0 0 10px
rgba(114,230,160,.8);
animation:
rose-ai-online-pulse
2s
ease-in-out
infinite;
}

.rose-chat-system-id{
color:rgba(255,255,255,.30);
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
monospace;
font-size:.62rem;
letter-spacing:.12em;
}

/* ========================================================= /
/ 03.4 — USER MESSAGE SYSTEM                                /
/ ========================================================= */

.rose-chat-messages{
position:relative;
z-index:1;
flex:1;
overflow-y:auto;
overflow-x:hidden;
display:flex;
flex-direction:column;
gap:22px;
padding:30px clamp(18px,4vw,42px);
scroll-behavior:smooth;
scrollbar-width:thin;
}

.rose-chat-message{
display:flex;
width:100%;
animation:
rose-message-enter
.55s
cubic-bezier(.22,1,.36,1)
both;
}

.rose-chat-message-user{
justify-content:flex-end;
}

.rose-chat-message-user .rose-message-bubble{
max-width:min(72%,620px);
border-radius:22px 22px 6px 22px;
border:1px solid rgba(214,164,77,.20);
background:
linear-gradient(
135deg,
rgba(214,164,77,.13),
rgba(255,255,255,.045)
);
box-shadow:
0 15px 35px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.07);
}

.rose-message-meta{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
color:rgba(255,255,255,.34);
font-size:.62rem;
letter-spacing:.12em;
text-transform:uppercase;
}

.rose-message-bubble{
position:relative;
padding:17px 19px;
color:rgba(255,255,255,.82);
font-size:.92rem;
line-height:1.75;
}

.rose-message-bubble p{
margin:0;
}

.rose-message-time{
margin-top:8px;
color:rgba(255,255,255,.25);
font-size:.58rem;
letter-spacing:.08em;
}

/* ========================================================= /
/ 03.5 — ROSE RESPONSE SYSTEM                               /
/ ========================================================= */

.rose-chat-message-ai{
justify-content:flex-start;
gap:14px;
}

.rose-chat-message-ai .rose-message-bubble{
max-width:min(78%,700px);
border-radius:6px 22px 22px 22px;
border:1px solid rgba(255,255,255,.10);
background:
linear-gradient(
145deg,
rgba(255,255,255,.065),
rgba(255,255,255,.022)
);
box-shadow:
0 18px 45px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.07);
}

.rose-ai-message-icon{
position:relative;
width:34px;
height:34px;
flex:0 0 auto;
margin-top:2px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(214,164,77,.35);
background:
radial-gradient(
circle,
rgba(214,164,77,.18),
transparent 68%
);
}

.rose-ai-message-icon::before{
content:"🌹";
font-size:13px;
}

.rose-ai-response-label{
color:rgba(214,164,77,.78);
font-size:.62rem;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
}

/* ========================================================= /
/ 03.6 — TYPING INDICATOR                                   /
/ ========================================================= */

.rose-ai-typing-indicator{
display:flex;
align-items:center;
gap:7px;
min-height:20px;
}

.rose-ai-typing-dot{
width:6px;
height:6px;
border-radius:50%;
background:rgba(214,164,77,.78);
box-shadow:
0 0 10px
rgba(214,164,77,.35);
animation:
rose-typing-bounce
1.25s
ease-in-out
infinite;
}

.rose-ai-typing-dot:nth-child(2){
animation-delay:.15s;
}

.rose-ai-typing-dot:nth-child(3){
animation-delay:.30s;
}

/* ========================================================= /
/ 03.7 — AI THINKING STATE                                  /
/ ========================================================= */

.rose-ai-thinking{
display:flex;
align-items:center;
gap:12px;
margin:0 0 4px;
color:rgba(255,255,255,.42);
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
monospace;
font-size:.64rem;
letter-spacing:.13em;
text-transform:uppercase;
}

.rose-ai-thinking-core{
position:relative;
width:12px;
height:12px;
border-radius:50%;
border:1px solid rgba(214,164,77,.65);
box-shadow:
0 0 0 0
rgba(214,164,77,.35);
animation:
rose-thinking-core
1.8s
ease-out
infinite;
}

.rose-ai-thinking-core::after{
content:"";
position:absolute;
inset:3px;
border-radius:50%;
background:rgba(214,164,77,.85);
box-shadow:
0 0 10px
rgba(214,164,77,.75);
}

/* ========================================================= /
/ 03.8 — VOICE INPUT INTERFACE                              /
/ ========================================================= */

.rose-voice-interface{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
flex:0 0 auto;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
background:
rgba(255,255,255,.045);
cursor:pointer;
transition:
transform .3s ease,
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
}

.rose-voice-interface::before{
content:"";
width:12px;
height:18px;
border:1.5px solid rgba(255,255,255,.72);
border-radius:8px;
}

.rose-voice-interface::after{
content:"";
position:absolute;
width:22px;
height:10px;
bottom:10px;
border:
1.5px solid
rgba(255,255,255,.55);
border-top:0;
border-radius:
0 0 12px 12px;
}

.rose-voice-interface:hover{
transform:
translateY(-2px)
scale(1.04);
border-color:
rgba(214,164,77,.55);
background:
rgba(214,164,77,.09);
box-shadow:
0 0 28px
rgba(214,164,77,.16);
}

.rose-voice-interface.is-listening{
border-color:
rgba(214,164,77,.85);
background:
rgba(214,164,77,.14);
box-shadow:
0 0 0 8px
rgba(214,164,77,.05),
0 0 35px
rgba(214,164,77,.25);
animation:
rose-listening-pulse
1.6s
ease-in-out
infinite;
}

/* ========================================================= /
/ 03.9 — TEXT INPUT INTERFACE                               /
/ ========================================================= */

.rose-text-input{
width:100%;
min-height:50px;
padding:14px 18px;
resize:none;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
outline:none;
color:rgba(255,255,255,.88);
background:
rgba(255,255,255,.035);
font:
inherit;
line-height:1.55;
transition:
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
}

.rose-text-input::placeholder{
color:rgba(255,255,255,.30);
}

.rose-text-input:focus{
border-color:
rgba(214,164,77,.48);
background:
rgba(255,255,255,.05);
box-shadow:
0 0 0 4px
rgba(214,164,77,.055),
inset 0 1px 0
rgba(255,255,255,.06);
}

/* ========================================================= /
/ 03.10 — SEND / MICROPHONE CONTROLS                        /
/ ========================================================= */

.rose-chat-input-area{
position:relative;
z-index:3;
display:flex;
align-items:flex-end;
gap:12px;
padding:18px 22px 22px;
border-top:1px solid rgba(255,255,255,.08);
background:
linear-gradient(
180deg,
rgba(7,9,14,.40),
rgba(7,9,14,.82)
);
}

.rose-chat-input-wrap{
position:relative;
flex:1;
display:flex;
align-items:flex-end;
gap:10px;
}

.rose-send-button{
position:relative;
width:48px;
height:48px;
flex:0 0 auto;
display:grid;
place-items:center;
border:1px solid rgba(214,164,77,.38);
border-radius:50%;
color:#fff;
background:
linear-gradient(
145deg,
rgba(214,164,77,.30),
rgba(214,164,77,.08)
);
cursor:pointer;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.rose-send-button::before{
content:"→";
font-size:20px;
line-height:1;
transform:
translateX(1px);
}

.rose-send-button:hover{
transform:
translateY(-2px)
scale(1.04);
border-color:
rgba(214,164,77,.75);
box-shadow:
0 0 30px
rgba(214,164,77,.22);
}

.rose-chat-controls-label{
position:absolute;
right:22px;
bottom:5px;
color:rgba(255,255,255,.20);
font-size:.55rem;
letter-spacing:.10em;
text-transform:uppercase;
}

/* ========================================================= /
/ 03.11 — CONVERSATION HISTORY                              /
/ ========================================================= */

.rose-conversation-history{
position:absolute;
top:0;
left:0;
bottom:0;
width:min(280px,82vw);
z-index:10;
transform:
translateX(-102%);
border-right:1px solid rgba(255,255,255,.10);
background:
rgba(7,9,14,.92);
backdrop-filter:
blur(30px);
-webkit-backdrop-filter:
blur(30px);
transition:
transform .45s
cubic-bezier(.22,1,.36,1);
}

.rose-conversation-history.is-open{
transform:
translateX(0);
}

.rose-history-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:22px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.rose-history-list{
display:flex;
flex-direction:column;
gap:7px;
padding:14px;
overflow-y:auto;
}

.rose-history-item{
padding:13px 14px;
border:1px solid transparent;
border-radius:12px;
color:rgba(255,255,255,.52);
background:
rgba(255,255,255,.025);
cursor:pointer;
transition:
color .25s ease,
background .25s ease,
border-color .25s ease;
}

.rose-history-item:hover,
.rose-history-item.is-active{
color:rgba(255,255,255,.82);
border-color:
rgba(214,164,77,.18);
background:
rgba(214,164,77,.06);
}

/* ========================================================= /
/ 03.12 — AI RESPONSE ANIMATION                             /
/ ========================================================= */

.rose-ai-response{
animation:
rose-response-materialize
.75s
cubic-bezier(.22,1,.36,1)
both;
}

.rose-ai-response::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
110deg,
transparent 25%,
rgba(255,255,255,.10) 48%,
transparent 68%
);
transform:
translateX(-120%);
animation:
rose-response-sweep
1.4s
ease-out
.15s
both;
}

/* ========================================================= /
/ 03.13 — DYNAMIC MESSAGE REVEAL                            /
/ ========================================================= */

.rose-dynamic-message{
position:relative;
display:inline;
}

.rose-dynamic-message::after{
content:"";
display:inline-block;
width:2px;
height:1em;
margin-left:4px;
vertical-align:-2px;
background:
rgba(214,164,77,.85);
box-shadow:
0 0 8px
rgba(214,164,77,.45);
animation:
rose-cursor-blink
.85s
steps(1)
infinite;
}

.rose-message-reveal{
overflow:hidden;
animation:
rose-text-reveal
.8s
cubic-bezier(.22,1,.36,1)
both;
}

/* ========================================================= /
/ 03.14 — INTELLIGENT SCROLL SYSTEM                         /
/ ========================================================= */

.rose-chat-messages::-webkit-scrollbar{
width:5px;
}

.rose-chat-messages::-webkit-scrollbar-track{
background:
rgba(255,255,255,.018);
}

.rose-chat-messages::-webkit-scrollbar-thumb{
border-radius:10px;
background:
linear-gradient(
180deg,
rgba(214,164,77,.55),
rgba(214,164,77,.12)
);
}

.rose-chat-messages::-webkit-scrollbar-thumb:hover{
background:
rgba(214,164,77,.72);
}

/* ========================================================= /
/ 03 — AI INTERFACE KEYFRAMES                               /
/ ========================================================= */

@keyframes rose-ai-online-pulse{

0%,
100%{
    opacity:.55;
    transform:scale(.85);
}

50%{
    opacity:1;
    transform:scale(1.15);
}

}

@keyframes rose-typing-bounce{

0%,
60%,
100%{
    transform:translateY(0);
    opacity:.38;
}

30%{
    transform:translateY(-5px);
    opacity:1;
}

}

@keyframes rose-thinking-core{

0%{
    box-shadow:
        0 0 0 0
        rgba(214,164,77,.38);
}

70%{
    box-shadow:
        0 0 0 9px
        rgba(214,164,77,0);
}

100%{
    box-shadow:
        0 0 0 0
        rgba(214,164,77,0);
}

}

@keyframes rose-listening-pulse{

0%,
100%{
    transform:scale(1);
}

50%{
    transform:scale(1.06);
}

}

@keyframes rose-message-enter{

from{
    opacity:0;
    transform:
        translateY(14px)
        scale(.985);
}

to{
    opacity:1;
    transform:
        translateY(0)
        scale(1);
}

}

@keyframes rose-response-materialize{

from{
    opacity:0;
    transform:
        translateY(10px)
        translateX(-8px);
    filter:blur(4px);
}

to{
    opacity:1;
    transform:
        translateY(0)
        translateX(0);
    filter:blur(0);
}

}

@keyframes rose-response-sweep{

to{
    transform:
        translateX(120%);
}

}

@keyframes rose-cursor-blink{

0%,
45%{
    opacity:1;
}

46%,
100%{
    opacity:0;
}

}

@keyframes rose-text-reveal{

from{
    opacity:0;
    clip-path:
        inset(0 100% 0 0);
}

to{
    opacity:1;
    clip-path:
        inset(0 0 0 0);
}

}

/* ========================================================= /
/ 03 — RESPONSIVE AI CONVERSATIONAL INTERFACE               /
/ ========================================================= */

@media (max-width:900px){

.rose-conversation-panel{
    min-height:620px;
    border-radius:26px;
}

.rose-chat-message-user .rose-message-bubble,
.rose-chat-message-ai .rose-message-bubble{
    max-width:86%;
}

}

@media (max-width:640px){

.rose-ai-chat-interface{
    margin-top:48px;
}

.rose-conversation-panel{
    min-height:600px;
    border-radius:20px;
}

.rose-chat-window-header{
    padding:16px 18px;
}

.rose-chat-system-id{
    display:none;
}

.rose-chat-messages{
    padding:22px 14px;
    gap:18px;
}

.rose-chat-message-user .rose-message-bubble,
.rose-chat-message-ai .rose-message-bubble{
    max-width:92%;
}

.rose-chat-input-area{
    padding:14px;
}

.rose-chat-input-wrap{
    gap:7px;
}

.rose-voice-interface,
.rose-send-button{
    width:44px;
    height:44px;
}

.rose-text-input{
    min-height:44px;
    padding:11px 14px;
}

}

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

.rose-ai-typing-dot,
.rose-ai-thinking-core,
.rose-chat-identity-state::before,
.rose-voice-interface.is-listening,
.rose-dynamic-message::after{
    animation:none;
}

.rose-chat-message,
.rose-ai-response,
.rose-message-reveal{
    animation:none;
}

    }
/* ========================================================= */
/* 04 — ROSE AI LIVE INTELLIGENCE SYSTEM                    */
/* ========================================================= */

/* 04.1 — LIVE INTELLIGENCE SECTION */
.rose-live-intelligence{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

/* 04.2 — LIVE AI PROCESSING ENVIRONMENT */
.rose-live-intelligence::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 50%,
        rgba(184,137,63,.16),
        transparent 26%),
        radial-gradient(circle at 20% 30%,
        rgba(110,80,180,.10),
        transparent 24%),
        radial-gradient(circle at 80% 70%,
        rgba(0,190,255,.08),
        transparent 25%);
    animation:roseLiveAmbient 12s ease-in-out infinite alternate;
}

/* 04.3 — COMPUTATIONAL GRID */
.rose-live-intelligence::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.16;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 18%,
        black 82%,
        transparent
    );
    animation:roseLiveGrid 24s linear infinite;
}

/* 04.4 — LIVE INTELLIGENCE HEADER */
.rose-live-intelligence .section-heading{
    position:relative;
    z-index:2;
    max-width:900px;
}

/* 04.5 — LIVE PROCESSING CONTAINER */
.rose-live-system{
    position:relative;
    min-height:720px;
    margin-top:70px;
    padding:70px;
    display:grid;
    grid-template-columns:1fr 1.35fr 1fr;
    align-items:center;
    gap:45px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at center,
        rgba(184,137,63,.08),
        transparent 34%),
        rgba(8,10,14,.68);
    box-shadow:
        0 40px 100px rgba(0,0,0,.45),
        inset 0 0 80px rgba(255,255,255,.025);
}

/* 04.6 — PROCESSING ATMOSPHERE */
.rose-live-system::before{
    content:"";
    position:absolute;
    inset:-30%;
    pointer-events:none;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(184,137,63,.08) 35deg,
            transparent 75deg,
            rgba(0,190,255,.05) 150deg,
            transparent 210deg,
            rgba(184,137,63,.07) 290deg,
            transparent 360deg
        );
    animation:roseLiveRotation 30s linear infinite;
}

/* 04.7 — PROCESSING NODES COLUMN */
.rose-processing-nodes{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* 04.8 — PROCESSING NODE */
.rose-processing-node{
    position:relative;
    padding:22px 24px;
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(18px);
    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease;
}

.rose-processing-node:hover{
    transform:translateX(8px);
    border-color:rgba(184,137,63,.35);
    background:rgba(184,137,63,.055);
}

/* 04.9 — NODE INDICATOR */
.rose-processing-node::before{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:rgba(184,137,63,.35);
    box-shadow:0 0 0 rgba(184,137,63,0);
    animation:roseNodePulse 2.2s ease-in-out infinite;
}

/* 04.10 — NODE ICON */
.rose-processing-node-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(184,137,63,.2);
    background:rgba(184,137,63,.05);
    color:rgba(255,255,255,.82);
    font-size:18px;
}

/* 04.11 — NODE CONTENT */
.rose-processing-node-content{
    flex:1;
}

.rose-processing-node-content span{
    display:block;
    margin-bottom:5px;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(184,137,63,.72);
}

.rose-processing-node-content strong{
    display:block;
    font-size:14px;
    font-weight:500;
    letter-spacing:.04em;
    color:rgba(255,255,255,.88);
}

/* 04.12 — NODE ACTIVE STATE */
.rose-processing-node.is-active{
    border-color:rgba(184,137,63,.3);
    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.09),
            rgba(255,255,255,.025)
        );
}

.rose-processing-node.is-active::before{
    background:#d8ad5d;
    box-shadow:
        0 0 10px rgba(216,173,93,.75),
        0 0 24px rgba(216,173,93,.35);
}

/* 04.13 — CENTRAL AI PROCESSING CORE */
.rose-live-core{
    position:relative;
    z-index:4;
    width:min(390px,100%);
    aspect-ratio:1;
    margin:auto;
    display:grid;
    place-items:center;
}

/* 04.14 — CORE OUTER FIELD */
.rose-live-core::before{
    content:"";
    position:absolute;
    inset:4%;
    border:1px solid rgba(184,137,63,.18);
    border-radius:50%;
    box-shadow:
        0 0 50px rgba(184,137,63,.08),
        inset 0 0 60px rgba(184,137,63,.05);
    animation:roseCoreBreath 5s ease-in-out infinite;
}

/* 04.15 — CORE PROCESSING RING */
.rose-live-core::after{
    content:"";
    position:absolute;
    inset:12%;
    border:1px dashed rgba(184,137,63,.32);
    border-radius:50%;
    animation:roseLiveCoreSpin 18s linear infinite;
}

/* 04.16 — CORE INNER INTELLIGENCE */
.rose-live-core-inner{
    position:relative;
    width:48%;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.16),
            transparent 20%
        ),
        radial-gradient(
            circle,
            rgba(184,137,63,.28),
            rgba(34,25,14,.78) 55%,
            rgba(5,7,10,.96) 100%
        );
    box-shadow:
        0 0 35px rgba(184,137,63,.22),
        0 0 100px rgba(184,137,63,.10),
        inset 0 0 35px rgba(255,255,255,.04);
    animation:roseCoreBreath 3.5s ease-in-out infinite;
}

/* 04.17 — CORE SIGNAL */
.rose-live-core-inner::before{
    content:"";
    position:absolute;
    inset:18%;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    animation:roseCoreInnerPulse 2s ease-in-out infinite;
}

/* 04.18 — CORE SIGNAL POINT */
.rose-live-core-inner::after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#e1b867;
    box-shadow:
        0 0 12px rgba(225,184,103,.9),
        0 0 35px rgba(225,184,103,.5);
    animation:roseCoreSignal 2.8s ease-in-out infinite;
}

/* 04.19 — CORE LABEL */
.rose-live-core-label{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
}

.rose-live-core-label strong{
    font-size:24px;
    letter-spacing:.28em;
    padding-left:.28em;
    color:#f3e7cb;
}

.rose-live-core-label span{
    font-size:9px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.48);
}

/* 04.20 — LIVE STATUS */
.rose-live-status{
    position:absolute;
    left:50%;
    bottom:-42px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
    font-size:10px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.52);
}

.rose-live-status::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#72d69b;
    box-shadow:
        0 0 10px rgba(114,214,155,.9);
    animation:roseStatusPulse 1.6s ease-in-out infinite;
}

/* 04.21 — AI SIGNAL CONNECTIONS */
.rose-live-connections{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}

.rose-live-connection{
    position:absolute;
    height:1px;
    transform-origin:left center;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.28),
            rgba(255,255,255,.08),
            transparent
        );
    opacity:.55;
}

.rose-live-connection::after{
    content:"";
    position:absolute;
    top:-2px;
    left:0;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#d9ae5c;
    box-shadow:0 0 12px rgba(217,174,92,.75);
    animation:roseDataPulse 3s linear infinite;
}

/* 04.22 — DATA STREAM PANEL */
.rose-live-data-stream{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* 04.23 — DATA STREAM CARD */
.rose-data-stream-card{
    position:relative;
    min-height:110px;
    padding:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(18px);
}

/* 04.24 — DATA STREAM HEADER */
.rose-data-stream-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px;
}

.rose-data-stream-header span{
    font-size:9px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
}

.rose-data-stream-header strong{
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(184,137,63,.72);
}

/* 04.25 — DATA STREAM LINES */
.rose-data-stream-lines{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rose-data-stream-line{
    position:relative;
    width:100%;
    height:3px;
    overflow:hidden;
    background:rgba(255,255,255,.055);
}

.rose-data-stream-line::after{
    content:"";
    position:absolute;
    inset:0;
    width:35%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.8),
            transparent
        );
    animation:roseStreamScan 2.4s linear infinite;
}

/* 04.26 — REAL-TIME FEEDBACK PANEL */
.rose-live-feedback{
    position:relative;
    z-index:3;
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:25px;
    padding:24px 28px;
    border:1px solid rgba(184,137,63,.15);
    background:rgba(184,137,63,.035);
}

/* 04.27 — FEEDBACK ICON */
.rose-live-feedback-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(184,137,63,.25);
    color:#d9ae5c;
    font-size:18px;
    animation:roseFeedbackPulse 2s ease-in-out infinite;
}

/* 04.28 — FEEDBACK TEXT */
.rose-live-feedback-content{
    min-width:0;
}

.rose-live-feedback-content span{
    display:block;
    margin-bottom:6px;
    font-size:9px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(184,137,63,.65);
}

.rose-live-feedback-content p{
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-family:monospace;
    font-size:12px;
    color:rgba(255,255,255,.7);
}

/* 04.29 — FEEDBACK STATUS */
.rose-live-feedback-state{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

.rose-live-feedback-state::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#72d69b;
    box-shadow:0 0 10px rgba(114,214,155,.8);
}

/* 04.30 — ANIMATIONS */
@keyframes roseLiveAmbient{
    from{
        transform:scale(1);
        opacity:.65;
    }
    to{
        transform:scale(1.12);
        opacity:1;
    }
}

@keyframes roseLiveGrid{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(54px,54px,0);
    }
}

@keyframes roseLiveRotation{
    to{
        transform:rotate(360deg);
    }
}

@keyframes roseNodePulse{
    0%,100%{
        opacity:.35;
        transform:scale(.8);
    }
    50%{
        opacity:1;
        transform:scale(1);
        box-shadow:
            0 0 12px rgba(184,137,63,.7);
    }
}

@keyframes roseCoreBreath{
    0%,100%{
        transform:scale(.96);
    }
    50%{
        transform:scale(1.04);
    }
}

@keyframes roseLiveCoreSpin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes roseCoreInnerPulse{
    0%,100%{
        transform:scale(.75);
        opacity:.25;
    }
    50%{
        transform:scale(1.1);
        opacity:.8;
    }
}

@keyframes roseCoreSignal{
    0%{
        transform:translate(-35px,-20px);
        opacity:0;
    }
    30%{
        opacity:1;
    }
    70%{
        opacity:1;
    }
    100%{
        transform:translate(35px,20px);
        opacity:0;
    }
}

@keyframes roseStatusPulse{
    0%,100%{
        transform:scale(.7);
        opacity:.5;
    }
    50%{
        transform:scale(1.2);
        opacity:1;
    }
}

@keyframes roseDataPulse{
    0%{
        left:0;
        opacity:0;
    }
    15%{
        opacity:1;
    }
    85%{
        opacity:1;
    }
    100%{
        left:100%;
        opacity:0;
    }
}

@keyframes roseStreamScan{
    from{
        transform:translateX(-120%);
    }
    to{
        transform:translateX(300%);
    }
}

@keyframes roseFeedbackPulse{
    0%,100%{
        box-shadow:0 0 0 rgba(184,137,63,0);
    }
    50%{
        box-shadow:
            0 0 25px rgba(184,137,63,.12),
            inset 0 0 20px rgba(184,137,63,.06);
    }
}

/* ========================================================= */
/* 04.31 — RESPONSIVE                                      */
/* ========================================================= */

@media (max-width:1100px){

    .rose-live-system{
        grid-template-columns:1fr 1fr;
        min-height:auto;
        padding:50px;
    }

    .rose-live-core{
        grid-column:1 / -1;
        grid-row:1;
        width:min(350px,80%);
        margin:20px auto 80px;
    }

    .rose-processing-nodes{
        grid-column:1;
    }

    .rose-live-data-stream{
        grid-column:2;
    }

    .rose-live-feedback{
        grid-column:1 / -1;
    }

}

@media (max-width:700px){

    .rose-live-system{
        display:flex;
        flex-direction:column;
        padding:28px 20px;
        gap:30px;
    }

    .rose-live-core{
        width:min(300px,90%);
        margin:10px auto 70px;
    }

    .rose-processing-nodes,
    .rose-live-data-stream{
        width:100%;
    }

    .rose-live-feedback{
        width:100%;
        grid-template-columns:auto 1fr;
        padding:20px;
    }

    .rose-live-feedback-state{
        grid-column:2;
    }

    .rose-live-feedback-content p{
        white-space:normal;
    }

    .rose-live-status{
        bottom:-38px;
        font-size:8px;
    }

}

/* ========================================================= */
/* 05 — ROSE AI AUTOMATED TYPING / DATA CARDS                */
/* ========================================================= */

/* 05.1 — AUTOMATED TYPING SYSTEM
------------------------------------------------------------- */

.rose-auto-typing-system{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin-top:70px;
    perspective:1200px;
}


/* 05.2 — AI TYPING CARD
------------------------------------------------------------- */

.rose-typing-card{
    position:relative;
    min-height:250px;
    padding:32px;
    overflow:hidden;
    border:1px solid rgba(184,137,63,.20);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ),
        rgba(8,10,15,.72);
    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        inset 0 0 35px rgba(184,137,63,.025);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;
}

.rose-typing-card:hover{
    transform:translateY(-8px) rotateX(2deg);
    border-color:rgba(184,137,63,.48);
    box-shadow:
        0 35px 90px rgba(0,0,0,.48),
        0 0 35px rgba(184,137,63,.08),
        inset 0 0 40px rgba(184,137,63,.04);
}


/* 05.3 — CARD TOP STATUS
------------------------------------------------------------- */

.rose-typing-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.75),
            transparent
        );
    opacity:.65;
}

.rose-typing-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(184,137,63,.10),
        transparent 70%
    );
    pointer-events:none;
}


/* 05.4 — AI DATA HEADER
------------------------------------------------------------- */

.rose-typing-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:28px;
}

.rose-typing-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
}

.rose-typing-status{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:.58rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(184,137,63,.78);
}

.rose-typing-status::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 8px rgba(184,137,63,.75);
    animation:
        rose-status-pulse 1.8s ease-in-out infinite;
}


/* 05.5 — AUTO TYPING TEXT
------------------------------------------------------------- */

.rose-auto-text{
    min-height:90px;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        monospace;
    font-size:.88rem;
    line-height:1.9;
    letter-spacing:.035em;
    color:rgba(255,255,255,.78);
}

.rose-auto-text::after{
    content:"";
    display:inline-block;
    width:7px;
    height:1.05em;
    margin-left:5px;
    vertical-align:-2px;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 10px rgba(184,137,63,.55);
    animation:
        rose-cursor-blink .85s steps(1) infinite;
}


/* 05.6 — AI THOUGHT CARD
------------------------------------------------------------- */

.rose-thought-card{
    border-color:rgba(184,137,63,.16);
}

.rose-thought-card .rose-auto-text{
    color:rgba(255,255,255,.62);
}

.rose-thought-card .rose-typing-label::before{
    content:"◉";
    color:rgba(184,137,63,.75);
}


/* 05.7 — LIVE DATA CARD
------------------------------------------------------------- */

.rose-live-data-card{
    overflow:hidden;
}

.rose-data-stream{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:8px;
}

.rose-data-line{
    display:grid;
    grid-template-columns:75px 1fr;
    gap:15px;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        monospace;
    font-size:.67rem;
    line-height:1.6;
    color:rgba(255,255,255,.48);
}

.rose-data-line span:first-child{
    color:rgba(184,137,63,.72);
}


/* 05.8 — COMMAND SIMULATION
------------------------------------------------------------- */

.rose-command-card{
    position:relative;
}

.rose-command-window{
    padding:20px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(0,0,0,.25);
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        monospace;
}

.rose-command-prefix{
    color:rgba(184,137,63,.8);
}

.rose-command-text{
    display:inline;
    color:rgba(255,255,255,.72);
}


/* 05.9 — AI RESPONSE SIMULATION
------------------------------------------------------------- */

.rose-response-card{
    position:relative;
}

.rose-response-indicator{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:20px;
}

.rose-response-indicator span{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(184,137,63,.8);
    animation:
        rose-thinking-dot 1.4s ease-in-out infinite;
}

.rose-response-indicator span:nth-child(2){
    animation-delay:.18s;
}

.rose-response-indicator span:nth-child(3){
    animation-delay:.36s;
}


/* 05.10 — NEURAL DATA MESSAGE
------------------------------------------------------------- */

.rose-neural-message{
    position:relative;
    padding:18px 20px;
    border-left:1px solid rgba(184,137,63,.48);
    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.055),
            transparent
        );
}

.rose-neural-message::before{
    content:"AI / DATA";
    display:block;
    margin-bottom:8px;
    font-size:.55rem;
    font-weight:700;
    letter-spacing:.18em;
    color:rgba(184,137,63,.65);
}


/* 05.11 — TYPING CURSOR
------------------------------------------------------------- */

.rose-typing-cursor{
    display:inline-block;
    width:7px;
    height:15px;
    margin-left:4px;
    vertical-align:-2px;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 10px rgba(184,137,63,.65);
    animation:
        rose-cursor-blink .8s steps(1) infinite;
}


/* 05.12 — MULTI STREAM ANIMATION
------------------------------------------------------------- */

.rose-stream-one{
    animation:
        rose-text-stream-one 12s steps(42,end) infinite;
}

.rose-stream-two{
    animation:
        rose-text-stream-two 15s steps(48,end) infinite;
}

.rose-stream-three{
    animation:
        rose-text-stream-three 18s steps(54,end) infinite;
}


/* 05.13 — INFINITE DATA PULSE
------------------------------------------------------------- */

.rose-data-pulse{
    position:absolute;
    top:50%;
    right:28px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 10px rgba(184,137,63,.7);
    animation:
        rose-data-pulse 2s ease-in-out infinite;
}


/* 05.14 — DATA CARD SCAN
------------------------------------------------------------- */

.rose-typing-card .rose-scan-line{
    position:absolute;
    left:0;
    width:100%;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.28),
            transparent
        );
    opacity:.35;
    animation:
        rose-card-scan 5s linear infinite;
    pointer-events:none;
}


/* 05.15 — AUTO TYPING KEYFRAMES
------------------------------------------------------------- */

@keyframes rose-text-stream-one{

    0%,
    8%{
        width:0;
        opacity:1;
    }

    38%,
    48%{
        width:100%;
        opacity:1;
    }

    58%{
        width:100%;
        opacity:.65;
    }

    72%,
    82%{
        width:0;
        opacity:.2;
    }

    100%{
        width:0;
        opacity:1;
    }

}

@keyframes rose-text-stream-two{

    0%,
    12%{
        width:0;
        opacity:1;
    }

    42%,
    52%{
        width:100%;
        opacity:1;
    }

    65%{
        width:100%;
        opacity:.6;
    }

    78%,
    88%{
        width:0;
        opacity:.2;
    }

    100%{
        width:0;
        opacity:1;
    }

}

@keyframes rose-text-stream-three{

    0%,
    15%{
        width:0;
        opacity:1;
    }

    45%,
    56%{
        width:100%;
        opacity:1;
    }

    68%{
        width:100%;
        opacity:.6;
    }

    82%,
    92%{
        width:0;
        opacity:.2;
    }

    100%{
        width:0;
        opacity:1;
    }

}


/* 05.16 — CURSOR BLINK
------------------------------------------------------------- */

@keyframes rose-cursor-blink{

    0%,
    45%{
        opacity:1;
    }

    46%,
    100%{
        opacity:0;
    }

}


/* 05.17 — STATUS PULSE
------------------------------------------------------------- */

@keyframes rose-status-pulse{

    0%,
    100%{
        transform:scale(1);
        opacity:.55;
    }

    50%{
        transform:scale(1.45);
        opacity:1;
    }

}


/* 05.18 — THINKING DOTS
------------------------------------------------------------- */

@keyframes rose-thinking-dot{

    0%,
    100%{
        transform:translateY(0);
        opacity:.3;
    }

    50%{
        transform:translateY(-4px);
        opacity:1;
    }

}


/* 05.19 — DATA PULSE
------------------------------------------------------------- */

@keyframes rose-data-pulse{

    0%,
    100%{
        transform:scale(1);
        opacity:.45;
    }

    50%{
        transform:scale(2.4);
        opacity:1;
    }

}


/* 05.20 — CARD SCAN
------------------------------------------------------------- */

@keyframes rose-card-scan{

    0%{
        top:-5%;
        opacity:0;
    }

    15%{
        opacity:.45;
    }

    85%{
        opacity:.45;
    }

    100%{
        top:105%;
        opacity:0;
    }

}


/* 05.21 — RESPONSIVE
------------------------------------------------------------- */

@media (max-width:980px){

    .rose-auto-typing-system{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:680px){

    .rose-auto-typing-system{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:45px;
    }

    .rose-typing-card{
        min-height:220px;
        padding:24px;
    }

    .rose-auto-text{
        font-size:.78rem;
    }

    .rose-data-line{
        grid-template-columns:65px 1fr;
        font-size:.60rem;
    }

}


/* 05.22 — REDUCED MOTION
------------------------------------------------------------- */

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

    .rose-typing-card,
    .rose-typing-status::before,
    .rose-typing-card .rose-scan-line,
    .rose-typing-cursor,
    .rose-data-pulse,
    .rose-response-indicator span{
        animation:none;
    }

    .rose-typing-card{
        transition:none;
    }

    }

/* ========================================================= */
/* 06 — ROSE AI NEURAL NETWORK / ROBOTIC VISUAL SYSTEM       */
/* ========================================================= */

/* 06.1 — NEURAL NETWORK ENVIRONMENT
------------------------------------------------------------- */

.rose-neural-network{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(184,137,63,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(3,5,10,.96),
            rgba(9,12,19,.92)
        );
}

.rose-neural-network::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:
        linear-gradient(
            rgba(184,137,63,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.035) 1px,
            transparent 1px
        );
    background-size:
        70px 70px,
        70px 70px;
    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 78%
        );
    pointer-events:none;
}

.rose-neural-network::after{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:-3;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(184,137,63,.08),
            transparent 18%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(184,137,63,.055),
            transparent 20%
        );
    animation:
        rose-neural-ambient 18s ease-in-out infinite alternate;
    pointer-events:none;
}


/* 06.2 — AI NEURAL CANVAS
------------------------------------------------------------- */

.rose-neural-canvas{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.rose-neural-canvas::before,
.rose-neural-canvas::after{
    content:"";
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    opacity:.45;
}

.rose-neural-canvas::before{
    background-image:
        radial-gradient(
            circle at 12% 22%,
            rgba(184,137,63,.8) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 28% 68%,
            rgba(184,137,63,.6) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 48% 30%,
            rgba(184,137,63,.85) 0 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at 68% 72%,
            rgba(184,137,63,.7) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 88% 36%,
            rgba(184,137,63,.75) 0 2px,
            transparent 3px
        );
    animation:
        rose-node-drift 12s ease-in-out infinite alternate;
}

.rose-neural-canvas::after{
    background:
        linear-gradient(
            28deg,
            transparent 48%,
            rgba(184,137,63,.12) 49%,
            transparent 50%
        ),
        linear-gradient(
            142deg,
            transparent 48%,
            rgba(184,137,63,.09) 49%,
            transparent 50%
        );
    background-size:
        280px 280px,
        350px 350px;
    animation:
        rose-network-shift 20s linear infinite;
}


/* 06.3 — AI NODE FIELD
------------------------------------------------------------- */

.rose-ai-node-field{
    position:relative;
    min-height:620px;
    width:100%;
    overflow:hidden;
}

.rose-ai-node{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 8px rgba(184,137,63,.75),
        0 0 24px rgba(184,137,63,.28);
    animation:
        rose-node-pulse 3s ease-in-out infinite;
}

.rose-ai-node::before{
    content:"";
    position:absolute;
    inset:-10px;
    border:1px solid rgba(184,137,63,.18);
    border-radius:50%;
    animation:
        rose-node-ring 3s ease-out infinite;
}

.rose-ai-node:nth-child(1){
    top:15%;
    left:12%;
    animation-delay:.2s;
}

.rose-ai-node:nth-child(2){
    top:30%;
    left:28%;
    animation-delay:1s;
}

.rose-ai-node:nth-child(3){
    top:18%;
    left:62%;
    animation-delay:1.8s;
}

.rose-ai-node:nth-child(4){
    top:42%;
    left:82%;
    animation-delay:.6s;
}

.rose-ai-node:nth-child(5){
    top:68%;
    left:18%;
    animation-delay:2.2s;
}

.rose-ai-node:nth-child(6){
    top:78%;
    left:48%;
    animation-delay:1.4s;
}

.rose-ai-node:nth-child(7){
    top:65%;
    left:76%;
    animation-delay:2.6s;
}

.rose-ai-node:nth-child(8){
    top:48%;
    left:52%;
    width:12px;
    height:12px;
    background:rgba(184,137,63,1);
    box-shadow:
        0 0 14px rgba(184,137,63,.95),
        0 0 45px rgba(184,137,63,.35);
}


/* 06.4 — NEURAL CONNECTION LINES
------------------------------------------------------------- */

.rose-neural-line{
    position:absolute;
    height:1px;
    transform-origin:left center;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.36),
            rgba(184,137,63,.08),
            transparent
        );
    opacity:.65;
    animation:
        rose-line-flow 4s ease-in-out infinite;
}

.rose-neural-line::after{
    content:"";
    position:absolute;
    top:-2px;
    left:0;
    width:28px;
    height:5px;
    border-radius:50%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.9),
            transparent
        );
    filter:blur(1px);
    animation:
        rose-data-particle 3s linear infinite;
}

.rose-neural-line.line-one{
    width:230px;
    top:28%;
    left:15%;
    transform:rotate(24deg);
}

.rose-neural-line.line-two{
    width:270px;
    top:35%;
    left:29%;
    transform:rotate(-12deg);
    animation-delay:.8s;
}

.rose-neural-line.line-three{
    width:220px;
    top:45%;
    left:53%;
    transform:rotate(-20deg);
    animation-delay:1.4s;
}

.rose-neural-line.line-four{
    width:260px;
    top:54%;
    left:20%;
    transform:rotate(18deg);
    animation-delay:2s;
}

.rose-neural-line.line-five{
    width:250px;
    top:65%;
    left:48%;
    transform:rotate(-28deg);
    animation-delay:2.6s;
}


/* 06.5 — DIGITAL BRAIN CORE
------------------------------------------------------------- */

.rose-digital-brain{
    position:absolute;
    top:50%;
    left:50%;
    width:210px;
    height:210px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(184,137,63,.3);
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.13),
            rgba(184,137,63,.025) 48%,
            transparent 72%
        );
    box-shadow:
        0 0 50px rgba(184,137,63,.12),
        inset 0 0 45px rgba(184,137,63,.08);
    animation:
        rose-brain-breathe 5s ease-in-out infinite;
}

.rose-digital-brain::before{
    content:"";
    position:absolute;
    inset:22px;
    border:1px dashed rgba(184,137,63,.3);
    border-radius:50%;
    animation:
        rose-core-rotate 18s linear infinite;
}

.rose-digital-brain::after{
    content:"";
    position:absolute;
    inset:48px;
    border:
        1px solid rgba(184,137,63,.45);
    border-radius:50%;
    box-shadow:
        0 0 25px rgba(184,137,63,.12);
}


/* 06.6 — NEURAL PULSE
------------------------------------------------------------- */

.rose-neural-pulse{
    position:absolute;
    top:50%;
    left:50%;
    width:25px;
    height:25px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(184,137,63,.95);
    box-shadow:
        0 0 12px rgba(184,137,63,1),
        0 0 45px rgba(184,137,63,.45);
    animation:
        rose-core-pulse 2.2s ease-in-out infinite;
}

.rose-neural-pulse::before,
.rose-neural-pulse::after{
    content:"";
    position:absolute;
    inset:-15px;
    border:1px solid rgba(184,137,63,.25);
    border-radius:50%;
    animation:
        rose-pulse-wave 2.8s ease-out infinite;
}

.rose-neural-pulse::after{
    animation-delay:1.4s;
}


/* 06.7 — MACHINE INTELLIGENCE GRID
------------------------------------------------------------- */

.rose-machine-grid{
    position:absolute;
    inset:0;
    opacity:.16;
    background-image:
        linear-gradient(
            rgba(184,137,63,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.18) 1px,
            transparent 1px
        );
    background-size:
        42px 42px;
    transform:
        perspective(700px)
        rotateX(58deg)
        translateY(25%);
    transform-origin:center bottom;
    animation:
        rose-grid-move 12s linear infinite;
}


/* 06.8 — AI CIRCUIT PATTERNS
------------------------------------------------------------- */

.rose-circuit-pattern{
    position:absolute;
    width:180px;
    height:180px;
    border:
        1px solid rgba(184,137,63,.16);
    opacity:.6;
}

.rose-circuit-pattern::before,
.rose-circuit-pattern::after{
    content:"";
    position:absolute;
    background:rgba(184,137,63,.22);
}

.rose-circuit-pattern::before{
    width:1px;
    height:100%;
    left:35%;
}

.rose-circuit-pattern::after{
    width:100%;
    height:1px;
    top:65%;
}

.rose-circuit-pattern.pattern-left{
    top:10%;
    left:-60px;
    transform:rotate(-15deg);
}

.rose-circuit-pattern.pattern-right{
    right:-60px;
    bottom:10%;
    transform:rotate(18deg);
}


/* 06.9 — FLOATING AI SYMBOLS
------------------------------------------------------------- */

.rose-floating-ai-symbol{
    position:absolute;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.65rem;
    letter-spacing:.12em;
    color:rgba(184,137,63,.38);
    opacity:.5;
    animation:
        rose-symbol-float 8s ease-in-out infinite;
}

.rose-floating-ai-symbol.symbol-one{
    top:18%;
    left:38%;
}

.rose-floating-ai-symbol.symbol-two{
    top:70%;
    left:36%;
    animation-delay:2s;
}

.rose-floating-ai-symbol.symbol-three{
    top:30%;
    right:20%;
    animation-delay:4s;
}

.rose-floating-ai-symbol.symbol-four{
    bottom:15%;
    right:12%;
    animation-delay:6s;
}


/* 06.10 — ROBOTIC HUD FRAME
------------------------------------------------------------- */

.rose-robotic-hud{
    position:relative;
    padding:28px;
    border:
        1px solid rgba(184,137,63,.18);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.2)
        );
    box-shadow:
        inset 0 0 35px rgba(184,137,63,.025);
}

.rose-robotic-hud::before{
    content:"AI SYSTEM // ACTIVE";
    position:absolute;
    top:12px;
    left:20px;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.52rem;
    letter-spacing:.16em;
    color:rgba(184,137,63,.6);
}

.rose-robotic-hud::after{
    content:"";
    position:absolute;
    top:12px;
    right:20px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 10px rgba(184,137,63,.7);
    animation:
        rose-status-pulse 2s ease-in-out infinite;
}


/* 06.11 — MOVING DATA PARTICLES
------------------------------------------------------------- */

.rose-data-particle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(184,137,63,.9);
    box-shadow:
        0 0 10px rgba(184,137,63,.75);
    animation:
        rose-particle-travel 6s linear infinite;
}

.rose-data-particle:nth-child(2){
    animation-delay:1.5s;
}

.rose-data-particle:nth-child(3){
    animation-delay:3s;
}

.rose-data-particle:nth-child(4){
    animation-delay:4.5s;
}


/* 06.12 — NEURAL WEB ACTIVE STATE
------------------------------------------------------------- */

.rose-neural-active{
    position:relative;
}

.rose-neural-active::before{
    content:"";
    position:absolute;
    inset:12px;
    border:
        1px solid rgba(184,137,63,.08);
    pointer-events:none;
}

.rose-neural-active .rose-ai-node{
    animation-duration:2s;
}

.rose-neural-active .rose-neural-line{
    animation-duration:2.5s;
}


/* 06.13 — AMBIENT INTELLIGENCE MOTION
------------------------------------------------------------- */

@keyframes rose-neural-ambient{

    0%{
        transform:translate3d(-2%, -1%, 0) scale(1);
    }

    100%{
        transform:translate3d(2%, 2%, 0) scale(1.08);
    }

}

@keyframes rose-node-drift{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(12px,-8px);
    }

    100%{
        transform:translate(-8px,12px);
    }

}

@keyframes rose-network-shift{

    0%{
        background-position:
            0 0,
            0 0;
    }

    100%{
        background-position:
            280px 140px,
            -350px 180px;
    }

}


/* 06.14 — NODE PULSE
------------------------------------------------------------- */

@keyframes rose-node-pulse{

    0%,
    100%{
        transform:scale(1);
        opacity:.55;
    }

    50%{
        transform:scale(1.7);
        opacity:1;
    }

}

@keyframes rose-node-ring{

    0%{
        transform:scale(.5);
        opacity:.7;
    }

    100%{
        transform:scale(2.8);
        opacity:0;
    }

}


/* 06.15 — NEURAL LINE FLOW
------------------------------------------------------------- */

@keyframes rose-line-flow{

    0%,
    100%{
        opacity:.28;
    }

    50%{
        opacity:.85;
    }

}

@keyframes rose-data-particle{

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

    15%{
        opacity:1;
    }

    85%{
        opacity:1;
    }

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

}


/* 06.16 — DIGITAL BRAIN MOTION
------------------------------------------------------------- */

@keyframes rose-brain-breathe{

    0%,
    100%{
        transform:translate(-50%,-50%) scale(1);
        box-shadow:
            0 0 50px rgba(184,137,63,.10),
            inset 0 0 45px rgba(184,137,63,.06);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.045);
        box-shadow:
            0 0 75px rgba(184,137,63,.20),
            inset 0 0 60px rgba(184,137,63,.12);
    }

}

@keyframes rose-core-rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes rose-core-pulse{

    0%,
    100%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.35);
    }

}

@keyframes rose-pulse-wave{

    0%{
        transform:scale(.6);
        opacity:.8;
    }

    100%{
        transform:scale(3.5);
        opacity:0;
    }

}


/* 06.17 — GRID MOTION
------------------------------------------------------------- */

@keyframes rose-grid-move{

    0%{
        background-position:
            0 0,
            0 0;
    }

    100%{
        background-position:
            0 42px,
            42px 0;
    }

}


/* 06.18 — FLOATING SYMBOL MOTION
------------------------------------------------------------- */

@keyframes rose-symbol-float{

    0%,
    100%{
        transform:translateY(0);
        opacity:.25;
    }

    50%{
        transform:translateY(-14px);
        opacity:.7;
    }

}


/* 06.19 — PARTICLE TRAVEL
------------------------------------------------------------- */

@keyframes rose-particle-travel{

    0%{
        transform:translate3d(0,0,0);
        opacity:0;
    }

    15%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        transform:translate3d(180px,-100px,0);
        opacity:0;
    }

}


/* 06.20 — RESPONSIVE
------------------------------------------------------------- */

@media (max-width:980px){

    .rose-ai-node-field{
        min-height:520px;
    }

    .rose-digital-brain{
        width:180px;
        height:180px;
    }

    .rose-neural-line.line-one{
        width:180px;
    }

    .rose-neural-line.line-two{
        width:200px;
    }

    .rose-neural-line.line-three{
        width:180px;
    }

    .rose-neural-line.line-four{
        width:190px;
    }

    .rose-neural-line.line-five{
        width:190px;
    }

}

@media (max-width:680px){

    .rose-ai-node-field{
        min-height:420px;
    }

    .rose-digital-brain{
        width:140px;
        height:140px;
    }

    .rose-digital-brain::before{
        inset:15px;
    }

    .rose-digital-brain::after{
        inset:32px;
    }

    .rose-neural-pulse{
        width:17px;
        height:17px;
    }

    .rose-neural-line{
        opacity:.4;
    }

    .rose-machine-grid{
        background-size:30px 30px;
    }

    .rose-circuit-pattern{
        opacity:.25;
    }

    .rose-floating-ai-symbol{
        font-size:.5rem;
    }

}


/* 06.21 — REDUCED MOTION
------------------------------------------------------------- */

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

    .rose-neural-network::after,
    .rose-neural-canvas::before,
    .rose-neural-canvas::after,
    .rose-ai-node,
    .rose-ai-node::before,
    .rose-neural-line,
    .rose-neural-line::after,
    .rose-digital-brain,
    .rose-digital-brain::before,
    .rose-neural-pulse,
    .rose-neural-pulse::before,
    .rose-neural-pulse::after,
    .rose-machine-grid,
    .rose-floating-ai-symbol,
    .rose-data-particle,
    .rose-robotic-hud::after{
        animation:none;
    }

            }
/* ========================================================= */
/* 07 — ROSE AI CAPABILITIES / INTELLIGENCE MODULES           */
/* ========================================================= */

/* 07.1 — CAPABILITIES INTELLIGENCE FIELD
------------------------------------------------------------- */

.rose-capabilities-intelligence{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(70px,8vw,130px) 0;
}

.rose-capabilities-intelligence::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(184,137,63,.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(184,137,63,.035),
            transparent 25%
        );
    pointer-events:none;
}

.rose-capabilities-intelligence::after{
    content:"AI CAPABILITY MATRIX // ONLINE";
    position:absolute;
    top:30px;
    right:5%;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        monospace;
    font-size:.52rem;
    letter-spacing:.18em;
    color:rgba(184,137,63,.35);
    pointer-events:none;
}


/* 07.2 — INTELLIGENCE MODULE GRID
------------------------------------------------------------- */

.rose-intelligence-modules{
    position:relative;
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:22px;
    margin-top:70px;
}

.rose-intelligence-module{
    position:relative;
    min-height:320px;
    padding:34px;
    overflow:hidden;
    isolation:isolate;
    border:
        1px solid rgba(184,137,63,.16);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ),
        rgba(7,9,14,.72);
    box-shadow:
        0 25px 65px rgba(0,0,0,.28),
        inset 0 0 40px rgba(184,137,63,.018);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;
}

.rose-intelligence-module:hover{
    transform:
        translateY(-9px)
        perspective(900px)
        rotateX(2deg);
    border-color:
        rgba(184,137,63,.42);
    box-shadow:
        0 35px 85px rgba(0,0,0,.42),
        0 0 35px rgba(184,137,63,.06),
        inset 0 0 45px rgba(184,137,63,.035);
}

.rose-intelligence-module::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(184,137,63,.045) 50%,
            transparent 80%
        );
    transform:
        translateX(-100%);
    transition:
        transform .8s ease;
}

.rose-intelligence-module:hover::before{
    transform:
        translateX(100%);
}

.rose-intelligence-module::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.7),
            transparent
        );
    opacity:.55;
}


/* 07.3 — MODULE NUMBER
------------------------------------------------------------- */

.rose-module-number{
    position:absolute;
    top:22px;
    right:26px;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.62rem;
    letter-spacing:.15em;
    color:rgba(184,137,63,.5);
}


/* 07.4 — MODULE ICON
------------------------------------------------------------- */

.rose-module-icon{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin-bottom:28px;
    border:
        1px solid rgba(184,137,63,.28);
    border-radius:18px;
    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.13),
            rgba(184,137,63,.025)
        );
    color:rgba(184,137,63,.9);
    font-size:1.45rem;
    box-shadow:
        0 0 25px rgba(184,137,63,.07),
        inset 0 0 20px rgba(184,137,63,.04);
}

.rose-module-icon::before{
    content:"";
    position:absolute;
    inset:-7px;
    border:
        1px solid rgba(184,137,63,.09);
    border-radius:22px;
    animation:
        rose-module-ring 4s ease-in-out infinite;
}


/* 07.5 — MODULE CONTENT
------------------------------------------------------------- */

.rose-intelligence-module h3{
    margin:0 0 15px;
    color:rgba(255,255,255,.9);
}

.rose-intelligence-module p{
    margin:0;
    color:rgba(255,255,255,.56);
    line-height:1.9;
}

.rose-module-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:26px;
    padding:
        7px
        11px;
    border:
        1px solid rgba(184,137,63,.13);
    background:
        rgba(184,137,63,.035);
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.55rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(184,137,63,.62);
}

.rose-module-status::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(184,137,63,.85);
    box-shadow:
        0 0 9px rgba(184,137,63,.7);
    animation:
        rose-module-status-pulse 2s ease-in-out infinite;
}


/* 07.6 — MODULE ACTIVATION STATE
------------------------------------------------------------- */

.rose-intelligence-module.is-active{
    border-color:
        rgba(184,137,63,.38);
    box-shadow:
        0 0 45px rgba(184,137,63,.08),
        inset 0 0 40px rgba(184,137,63,.035);
}

.rose-intelligence-module.is-active
.rose-module-icon{
    border-color:
        rgba(184,137,63,.55);
    box-shadow:
        0 0 30px rgba(184,137,63,.14),
        inset 0 0 25px rgba(184,137,63,.08);
}

.rose-intelligence-module.is-active
.rose-module-status{
    color:
        rgba(184,137,63,.9);
}


/* 07.7 — VOICE INTELLIGENCE MODULE
------------------------------------------------------------- */

.rose-module-voice
.rose-module-icon{
    animation:
        rose-voice-wave 3s ease-in-out infinite;
}


/* 07.8 — CONTEXTUAL INTELLIGENCE MODULE
------------------------------------------------------------- */

.rose-module-context
.rose-module-icon{
    border-radius:50%;
}

.rose-module-context
.rose-module-icon::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    border:
        1px solid rgba(184,137,63,.55);
    border-radius:50%;
    animation:
        rose-context-orbit 4s linear infinite;
}


/* 07.9 — PERSONALIZED ASSISTANCE MODULE
------------------------------------------------------------- */

.rose-module-personalized
.rose-module-icon{
    border-radius:
        50%
        50%
        18px
        18px;
}


/* 07.10 — VEHICLE INTELLIGENCE MODULE
------------------------------------------------------------- */

.rose-module-vehicle{
    background:
        linear-gradient(
            145deg,
            rgba(184,137,63,.035),
            rgba(255,255,255,.012)
        ),
        rgba(7,9,14,.74);
}

.rose-module-vehicle::before{
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(184,137,63,.035) 19px 20px
        );
}


/* 07.11 — HUMAN-CENTERED ASSISTANCE
------------------------------------------------------------- */

.rose-module-human{
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(184,137,63,.07),
            transparent 35%
        ),
        rgba(7,9,14,.74);
}


/* 07.12 — ECOSYSTEM INTELLIGENCE
------------------------------------------------------------- */

.rose-module-ecosystem{
    overflow:visible;
}

.rose-module-ecosystem::after{
    animation:
        rose-module-scan 4s linear infinite;
}


/* 07.13 — ACCESSIBILITY INTELLIGENCE
------------------------------------------------------------- */

.rose-module-accessibility
.rose-module-icon{
    border-radius:50%;
}

.rose-module-accessibility
.rose-module-status{
    border-color:
        rgba(184,137,63,.24);
}


/* 07.14 — EMERGENCY ASSISTANCE
------------------------------------------------------------- */

.rose-module-emergency{
    border-color:
        rgba(184,137,63,.24);
}

.rose-module-emergency
.rose-module-icon{
    animation:
        rose-emergency-pulse 2.4s ease-in-out infinite;
}


/* 07.15 — CAPABILITY MATRIX
------------------------------------------------------------- */

.rose-capability-matrix{
    position:relative;
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:1px;
    margin-top:80px;
    overflow:hidden;
    border:
        1px solid rgba(184,137,63,.13);
    background:
        rgba(184,137,63,.08);
}

.rose-capability-cell{
    position:relative;
    min-height:120px;
    padding:24px;
    background:
        rgba(7,9,14,.86);
    transition:
        background .4s ease,
        transform .4s ease;
}

.rose-capability-cell:hover{
    background:
        rgba(184,137,63,.045);
    z-index:2;
}

.rose-capability-cell::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:1px;
    background:
        rgba(184,137,63,.8);
    transition:
        width .5s ease;
}

.rose-capability-cell:hover::before{
    width:100%;
}

.rose-capability-cell span{
    display:block;
    margin-bottom:12px;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.56rem;
    letter-spacing:.14em;
    color:
        rgba(184,137,63,.58);
}

.rose-capability-cell strong{
    color:
        rgba(255,255,255,.72);
    font-size:.82rem;
}


/* 07.16 — DYNAMIC MODULE ACTIVATION BAR
------------------------------------------------------------- */

.rose-module-activation{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:55px;
    padding:
        22px
        28px;
    border:
        1px solid rgba(184,137,63,.16);
    background:
        rgba(7,9,14,.68);
    box-shadow:
        inset 0 0 30px rgba(184,137,63,.025);
}

.rose-module-activation-label{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.62rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:
        rgba(255,255,255,.58);
}

.rose-module-activation-label::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:
        rgba(184,137,63,.9);
    box-shadow:
        0 0 12px rgba(184,137,63,.7);
    animation:
        rose-module-status-pulse 1.8s ease-in-out infinite;
}

.rose-module-progress{
    position:relative;
    flex:1;
    max-width:420px;
    height:3px;
    overflow:hidden;
    background:
        rgba(255,255,255,.07);
}

.rose-module-progress::before{
    content:"";
    position:absolute;
    inset:0;
    width:72%;
    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.25),
            rgba(184,137,63,.9)
        );
    box-shadow:
        0 0 12px rgba(184,137,63,.35);
    animation:
        rose-capability-progress 4s ease-in-out infinite;
}


/* 07.17 — INTELLIGENCE CORE CONNECTION
------------------------------------------------------------- */

.rose-capabilities-core{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:170px;
    height:170px;
    margin:
        90px
        auto
        40px;
    border:
        1px solid rgba(184,137,63,.3);
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.14),
            transparent 68%
        );
    box-shadow:
        0 0 60px rgba(184,137,63,.1),
        inset 0 0 35px rgba(184,137,63,.06);
}

.rose-capabilities-core::before,
.rose-capabilities-core::after{
    content:"";
    position:absolute;
    border:
        1px solid rgba(184,137,63,.14);
    border-radius:50%;
}

.rose-capabilities-core::before{
    inset:-25px;
    animation:
        rose-core-rotate 18s linear infinite;
}

.rose-capabilities-core::after{
    inset:-55px;
    border-style:dashed;
    animation:
        rose-core-rotate-reverse 25s linear infinite;
}

.rose-capabilities-core span{
    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        monospace;
    font-size:.78rem;
    letter-spacing:.2em;
    color:
        rgba(184,137,63,.9);
}


/* 07.18 — CAPABILITY CONNECTION LINES
------------------------------------------------------------- */

.rose-capability-network{
    position:relative;
}

.rose-capability-network::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1px;
    height:80px;
    background:
        linear-gradient(
            rgba(184,137,63,.5),
            transparent
        );
}


/* 07.19 — MODULE ANIMATIONS
------------------------------------------------------------- */

@keyframes rose-module-ring{

    0%,
    100%{
        transform:scale(1);
        opacity:.25;
    }

    50%{
        transform:scale(1.12);
        opacity:.7;
    }

}

@keyframes rose-module-status-pulse{

    0%,
    100%{
        transform:scale(1);
        opacity:.45;
    }

    50%{
        transform:scale(1.6);
        opacity:1;
    }

}

@keyframes rose-voice-wave{

    0%,
    100%{
        box-shadow:
            0 0 18px rgba(184,137,63,.05);
    }

    50%{
        box-shadow:
            0 0 35px rgba(184,137,63,.18);
    }

}

@keyframes rose-context-orbit{

    from{
        transform:rotate(0deg)
        translateX(16px)
        rotate(0deg);
    }

    to{
        transform:rotate(360deg)
        translateX(16px)
        rotate(-360deg);
    }

}

@keyframes rose-emergency-pulse{

    0%,
    100%{
        transform:scale(1);
        box-shadow:
            0 0 18px rgba(184,137,63,.05);
    }

    50%{
        transform:scale(1.06);
        box-shadow:
            0 0 38px rgba(184,137,63,.16);
    }

}

@keyframes rose-module-scan{

    0%{
        opacity:.15;
    }

    50%{
        opacity:.7;
    }

    100%{
        opacity:.15;
    }

}

@keyframes rose-capability-progress{

    0%,
    100%{
        width:48%;
    }

    50%{
        width:86%;
    }

}

@keyframes rose-core-rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes rose-core-rotate-reverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}


/* 07.20 — RESPONSIVE
------------------------------------------------------------- */

@media (max-width:1050px){

    .rose-intelligence-modules{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .rose-capability-matrix{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media (max-width:680px){

    .rose-intelligence-modules{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:45px;
    }

    .rose-intelligence-module{
        min-height:280px;
        padding:26px;
    }

    .rose-capability-matrix{
        grid-template-columns:1fr;
        margin-top:55px;
    }

    .rose-module-activation{
        flex-direction:column;
        align-items:flex-start;
    }

    .rose-module-progress{
        width:100%;
        max-width:none;
    }

    .rose-capabilities-core{
        width:135px;
        height:135px;
        margin-top:65px;
    }

}


/* 07.21 — REDUCED MOTION
------------------------------------------------------------- */

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

    .rose-intelligence-module,
    .rose-intelligence-module::before,
    .rose-module-icon::before,
    .rose-module-status::before,
    .rose-module-voice
    .rose-module-icon,
    .rose-module-context
    .rose-module-icon::after,
    .rose-module-emergency
    .rose-module-icon,
    .rose-module-activation-label::before,
    .rose-module-progress::before,
    .rose-capabilities-core::before,
    .rose-capabilities-core::after{

        animation:none;

    }

    .rose-intelligence-module{
        transition:none;
    }

                  }
/* ========================================================= */
/* 08 — ROSE AI × ARS BRAIN INTELLIGENCE ECOSYSTEM          */
/* ========================================================= */

/* ========================================================= */
/* 08.1 — ECOSYSTEM INTELLIGENCE ENVIRONMENT                */
/* ========================================================= */

.rose-integration{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(110px,12vw,180px) 0;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(184,137,63,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(110,70,255,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #030407 0%,
            #05070b 50%,
            #020305 100%
        );
}

.rose-integration::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.22;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size:
        72px 72px;
    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 78%
        );
}

.rose-integration::after{
    content:"";
    position:absolute;
    width:900px;
    height:900px;
    left:50%;
    top:38%;
    transform:translate(-50%,-50%);
    z-index:-1;
    pointer-events:none;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.09),
            transparent 58%
        );
    filter:blur(20px);
    animation:
        rose-ecosystem-ambient 10s ease-in-out infinite;
}

@keyframes rose-ecosystem-ambient{

    0%,
    100%{
        transform:translate(-50%,-50%) scale(.92);
        opacity:.55;
    }

    50%{
        transform:translate(-50%,-50%) scale(1.08);
        opacity:1;
    }

}


/* ========================================================= */
/* 08.2 — ARS BRAIN CONNECTION SYSTEM                       */
/* ========================================================= */

.rose-ecosystem-map{
    position:relative;
    min-height:760px;
    margin-top:80px;
    padding:70px;
    border:1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(184,137,63,.08),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 30px 100px rgba(0,0,0,.45);
    overflow:hidden;
}

.rose-ecosystem-map::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at center,
            transparent 0 16%,
            rgba(184,137,63,.04) 16.5%,
            transparent 17%
        );
}

.rose-ecosystem-map::after{
    content:"";
    position:absolute;
    inset:40px;
    border:1px solid rgba(184,137,63,.06);
    pointer-events:none;
}


/* ========================================================= */
/* 08.3 — CENTRAL INTELLIGENCE NODE                         */
/* ========================================================= */

.ecosystem-center{
    position:absolute;
    left:50%;
    top:50%;
    width:250px;
    height:250px;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    z-index:5;
}

.rose-center-core{
    position:relative;
    width:145px;
    height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(184,137,63,.7);
    color:#fff;
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:.28em;
    padding-left:.28em;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.18),
            transparent 18%
        ),
        radial-gradient(
            circle,
            rgba(184,137,63,.28),
            rgba(8,10,14,.96) 62%
        );
    box-shadow:
        0 0 0 10px rgba(184,137,63,.025),
        0 0 0 22px rgba(184,137,63,.018),
        0 0 55px rgba(184,137,63,.25),
        inset 0 0 35px rgba(184,137,63,.14);
    animation:
        rose-core-pulse 4s ease-in-out infinite;
}

.rose-center-core::before,
.rose-center-core::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.rose-center-core::before{
    inset:-20px;
    border:1px solid rgba(184,137,63,.18);
    animation:
        rose-core-ring 7s linear infinite;
}

.rose-center-core::after{
    inset:-42px;
    border:1px dashed rgba(184,137,63,.08);
    animation:
        rose-core-ring 14s linear infinite reverse;
}

@keyframes rose-core-pulse{

    0%,
    100%{
        box-shadow:
            0 0 0 10px rgba(184,137,63,.025),
            0 0 0 22px rgba(184,137,63,.018),
            0 0 45px rgba(184,137,63,.18),
            inset 0 0 25px rgba(184,137,63,.10);
    }

    50%{
        box-shadow:
            0 0 0 12px rgba(184,137,63,.035),
            0 0 0 28px rgba(184,137,63,.022),
            0 0 75px rgba(184,137,63,.38),
            inset 0 0 45px rgba(184,137,63,.20);
    }

}

@keyframes rose-core-ring{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.ecosystem-center > span{
    color:rgba(255,255,255,.45);
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.42em;
    text-transform:uppercase;
}


/* ========================================================= */
/* 08.4 — ECOSYSTEM NETWORK LINES                            */
/* ========================================================= */

.rose-ecosystem-map .ecosystem-center::before,
.rose-ecosystem-map .ecosystem-center::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:470px;
    height:470px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(184,137,63,.055);
    border-radius:50%;
    pointer-events:none;
}

.rose-ecosystem-map .ecosystem-center::after{
    width:650px;
    height:650px;
    border-style:dashed;
    animation:
        rose-ecosystem-orbit 30s linear infinite;
}

@keyframes rose-ecosystem-orbit{

    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }

}


/* ========================================================= */
/* 08.5 — ECOSYSTEM NODES                                    */
/* ========================================================= */

.ecosystem-node{
    position:absolute;
    width:230px;
    min-height:190px;
    padding:30px 26px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;
    z-index:3;
}

.ecosystem-node:hover{
    transform:translateY(-8px);
    border-color:rgba(184,137,63,.35);
    box-shadow:
        0 20px 60px rgba(0,0,0,.4),
        0 0 35px rgba(184,137,63,.08);
}

.ecosystem-node::before{
    content:"";
    position:absolute;
    width:1px;
    height:180px;
    background:
        linear-gradient(
            180deg,
            rgba(184,137,63,0),
            rgba(184,137,63,.45),
            rgba(184,137,63,0)
        );
    pointer-events:none;
}

.ecosystem-node-icon{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border:1px solid rgba(184,137,63,.28);
    border-radius:16px;
    font-size:1.45rem;
    background:
        rgba(184,137,63,.06);
    box-shadow:
        inset 0 0 20px rgba(184,137,63,.05);
}

.ecosystem-node h3{
    margin:0;
    color:#fff;
    font-size:1.1rem;
    letter-spacing:.04em;
}

.ecosystem-node p{
    margin:10px 0 12px;
    color:rgba(255,255,255,.55);
    font-size:.82rem;
    line-height:1.7;
}

.ecosystem-node > span{
    color:rgba(184,137,63,.75);
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.28em;
}


/* ========================================================= */
/* 08.6 — NODE POSITIONS                                     */
/* ========================================================= */

.ecosystem-node-brain{
    left:8%;
    top:50%;
    transform:translateY(-50%);
}

.ecosystem-node-naji{
    right:8%;
    top:50%;
    transform:translateY(-50%);
}

.ecosystem-node-haven{
    left:50%;
    top:8%;
    transform:translateX(-50%);
}

.ecosystem-node-future{
    left:50%;
    bottom:8%;
    transform:translateX(-50%);
}

.ecosystem-node-brain:hover{
    transform:translateY(calc(-50% - 8px));
}

.ecosystem-node-naji:hover{
    transform:translateY(calc(-50% - 8px));
}

.ecosystem-node-haven:hover,
.ecosystem-node-future:hover{
    transform:translateX(-50%) translateY(-8px);
}


/* ========================================================= */
/* 08.7 — INTER-SYSTEM DATA FLOW                             */
/* ========================================================= */

.ecosystem-node-brain::after,
.ecosystem-node-naji::after,
.ecosystem-node-haven::after,
.ecosystem-node-future::after{
    content:"";
    position:absolute;
    pointer-events:none;
}

.ecosystem-node-brain::after{
    right:-260px;
    top:50%;
    width:260px;
    height:1px;
    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.05),
            rgba(184,137,63,.55),
            rgba(184,137,63,.05)
        );
}

.ecosystem-node-naji::after{
    left:-260px;
    top:50%;
    width:260px;
    height:1px;
    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.05),
            rgba(184,137,63,.55),
            rgba(184,137,63,.05)
        );
}

.ecosystem-node-haven::after{
    left:50%;
    bottom:-210px;
    width:1px;
    height:210px;
    background:
        linear-gradient(
            180deg,
            rgba(184,137,63,.05),
            rgba(184,137,63,.55),
            rgba(184,137,63,.05)
        );
}

.ecosystem-node-future::after{
    left:50%;
    top:-210px;
    width:1px;
    height:210px;
    background:
        linear-gradient(
            180deg,
            rgba(184,137,63,.05),
            rgba(184,137,63,.55),
            rgba(184,137,63,.05)
        );
}


/* ========================================================= */
/* 08.8 — INTEGRATION CARDS                                 */
/* ========================================================= */

.rose-integration-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:22px;
    margin-top:30px;
}

.integration-card{
    position:relative;
    min-height:300px;
    padding:36px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.integration-card:hover{
    transform:translateY(-10px);
    border-color:rgba(184,137,63,.28);
    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        0 0 40px rgba(184,137,63,.06);
}

.integration-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-80px;
    bottom:-80px;
    border-radius:50%;
    border:1px solid rgba(184,137,63,.07);
    box-shadow:
        0 0 0 25px rgba(184,137,63,.02),
        0 0 0 50px rgba(184,137,63,.012);
}

.integration-number{
    display:block;
    margin-bottom:40px;
    color:rgba(184,137,63,.65);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.28em;
}

.integration-card h3{
    margin:0 0 18px;
    color:#fff;
    font-size:1.25rem;
}

.integration-card p{
    margin:0;
    color:rgba(255,255,255,.55);
    font-size:.9rem;
    line-height:1.9;
}


/* ========================================================= */
/* 08.9 — ACTIVE CONNECTION STATES                           */
/* ========================================================= */

.integration-card::before{
    content:"ACTIVE CONNECTION";
    position:absolute;
    right:28px;
    top:28px;
    padding:6px 10px;
    border:1px solid rgba(184,137,63,.12);
    color:rgba(184,137,63,.55);
    font-size:.48rem;
    font-weight:700;
    letter-spacing:.18em;
    opacity:.7;
}

.integration-card:hover::before{
    animation:
        rose-connection-blink 1.4s ease-in-out infinite;
}

@keyframes rose-connection-blink{

    0%,
    100%{
        opacity:.35;
    }

    50%{
        opacity:1;
        box-shadow:
            0 0 18px rgba(184,137,63,.18);
    }

}


/* ========================================================= */
/* 08.10 — ROSE INTEGRATION STATEMENT                        */
/* ========================================================= */

.rose-integration-statement{
    position:relative;
    margin-top:24px;
    padding:75px 60px;
    text-align:center;
    overflow:hidden;
    border:1px solid rgba(184,137,63,.14);
    background:
        radial-gradient(
            circle at center,
            rgba(184,137,63,.08),
            transparent 48%
        ),
        rgba(255,255,255,.018);
}

.rose-integration-statement::before{
    content:"";
    position:absolute;
    inset:20px;
    border:1px solid rgba(184,137,63,.045);
    pointer-events:none;
}

.rose-integration-statement h2{
    position:relative;
    max-width:850px;
    margin:22px auto;
    color:#fff;
    font-size:
        clamp(2rem,4vw,4rem);
    line-height:1.15;
}

.rose-integration-statement p{
    position:relative;
    max-width:760px;
    margin:0 auto;
    color:rgba(255,255,255,.56);
    font-size:1rem;
    line-height:2;
}

.integration-signature{
    position:relative;
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:45px auto 0;
    border:1px solid rgba(184,137,63,.35);
    border-radius:50%;
    color:rgba(184,137,63,.9);
    font-size:1.4rem;
    box-shadow:
        0 0 35px rgba(184,137,63,.12);
    animation:
        rose-signature-pulse 4s ease-in-out infinite;
}

@keyframes rose-signature-pulse{

    0%,
    100%{
        transform:scale(1);
        box-shadow:
            0 0 25px rgba(184,137,63,.08);
    }

    50%{
        transform:scale(1.08);
        box-shadow:
            0 0 45px rgba(184,137,63,.22);
    }

}


/* ========================================================= */
/* 08.11 — RESPONSIVE ECOSYSTEM SYSTEM                       */
/* ========================================================= */

@media (max-width:1100px){

    .rose-ecosystem-map{
        min-height:950px;
    }

    .ecosystem-node-brain{
        left:4%;
    }

    .ecosystem-node-naji{
        right:4%;
    }

    .ecosystem-node-brain::after,
    .ecosystem-node-naji::after{
        width:180px;
    }

    .ecosystem-node-brain::after{
        right:-180px;
    }

    .ecosystem-node-naji::after{
        left:-180px;
    }

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

}


@media (max-width:820px){

    .rose-ecosystem-map{
        min-height:auto;
        padding:30px 20px;
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
    }

    .ecosystem-center{
        position:relative;
        left:auto;
        top:auto;
        width:100%;
        height:220px;
        transform:none;
        grid-row:1;
    }

    .ecosystem-node{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:100%;
        min-height:180px;
        transform:none !important;
    }

    .ecosystem-node::after{
        display:none;
    }

    .rose-ecosystem-map .ecosystem-center::before,
    .rose-ecosystem-map .ecosystem-center::after{
        width:220px;
        height:220px;
    }

    .rose-integration-grid{
        grid-template-columns:1fr;
    }

    .rose-integration-statement{
        padding:55px 25px;
    }

}


@media (max-width:520px){

    .rose-integration{
        padding:
            90px 0;
    }

    .rose-ecosystem-map{
        margin-top:55px;
        padding:22px 16px;
    }

    .rose-center-core{
        width:120px;
        height:120px;
        font-size:1.1rem;
    }

    .ecosystem-node{
        padding:28px 20px;
    }

    .integration-card{
        min-height:auto;
        padding:28px;
    }

    .rose-integration-statement h2{
        font-size:1.8rem;
    }

}


/* ========================================================= */
/* 08.12 — ACCESSIBILITY / MOTION SAFETY                     */
/* ========================================================= */

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

    .rose-integration::after,
    .rose-center-core,
    .rose-center-core::before,
    .rose-center-core::after,
    .rose-ecosystem-map .ecosystem-center::after,
    .integration-card::before,
    .integration-signature{
        animation:none !important;
    }

    }
/* ========================================================= */
/* 09 — ROSE AI TRUST / PRIVACY / SECURITY SYSTEM            */
/* ========================================================= */

/* ========================================================= */
/* 09.1 — TRUST / SECURITY IMMERSIVE ENVIRONMENT             */
/* ========================================================= */

.rose-trust{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 28%,
        rgba(196,38,72,.14),
        transparent 26%),
        radial-gradient(circle at 82% 68%,
        rgba(62,122,255,.10),
        transparent 28%),
        linear-gradient(
        135deg,
        rgba(5,8,18,.98),
        rgba(8,12,26,.98)
        );
}

.rose-trust::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.24;
    background:
        linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
        ),
        linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
        );
    background-size:54px 54px;
    mask-image:linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
}

.rose-trust::after{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    top:-260px;
    right:-260px;
    border:1px solid rgba(196,38,72,.12);
    border-radius:50%;
    box-shadow:
        0 0 80px rgba(196,38,72,.08),
        inset 0 0 80px rgba(196,38,72,.05);
    pointer-events:none;
}


/* ========================================================= */
/* 09.2 — TRUST SECTION HEADING                              */
/* ========================================================= */

.rose-trust .section-heading{
    position:relative;
    z-index:2;
    max-width:920px;
    margin-inline:auto;
}

.rose-trust .section-heading::before{
    content:"SECURE INTELLIGENCE // TRUST PROTOCOL";
    display:block;
    margin-bottom:18px;
    font-family:
        "Courier New",
        monospace;
    font-size:.68rem;
    letter-spacing:.28em;
    color:rgba(196,38,72,.72);
    opacity:.9;
}

.rose-trust .section-heading h2{
    text-shadow:
        0 0 28px rgba(196,38,72,.12);
}


/* ========================================================= */
/* 09.3 — TRUST MAIN LAYOUT                                  */
/* ========================================================= */

.trust-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
        minmax(320px,.9fr)
        minmax(420px,1.1fr);
    gap:clamp(35px,6vw,90px);
    align-items:center;
    margin-top:clamp(55px,8vw,100px);
}


/* ========================================================= */
/* 09.4 — PROTECTED AI CORE VISUAL                           */
/* ========================================================= */

.trust-visual{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(
        circle at center,
        rgba(196,38,72,.18),
        transparent 28%
        ),
        radial-gradient(
        circle at center,
        rgba(20,42,90,.20),
        transparent 58%
        ),
        rgba(4,7,17,.72);
    box-shadow:
        0 35px 100px rgba(0,0,0,.45),
        inset 0 0 80px rgba(196,38,72,.04);
}

.trust-visual::before{
    content:"";
    position:absolute;
    inset:8%;
    border:1px solid rgba(255,255,255,.055);
    border-radius:50%;
    animation:
        rose-trust-orbit
        18s linear infinite;
}

.trust-visual::after{
    content:"";
    position:absolute;
    width:1px;
    height:82%;
    background:
        linear-gradient(
        to bottom,
        transparent,
        rgba(196,38,72,.55),
        transparent
        );
    animation:
        rose-security-scan
        4.5s ease-in-out infinite;
}


/* ========================================================= */
/* 09.5 — TRUST CORE                                        */
/* ========================================================= */

.trust-core{
    position:relative;
    z-index:5;
    width:220px;
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(196,38,72,.55);
    color:#fff;
    font-family:
        "Arial",
        sans-serif;
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:.35em;
    padding-left:.35em;
    background:
        radial-gradient(
        circle at 35% 30%,
        rgba(255,255,255,.12),
        transparent 22%
        ),
        radial-gradient(
        circle,
        rgba(196,38,72,.34),
        rgba(11,15,30,.95) 62%
        );
    box-shadow:
        0 0 35px rgba(196,38,72,.35),
        0 0 100px rgba(196,38,72,.14),
        inset 0 0 40px rgba(255,255,255,.035);
    animation:
        rose-trust-core-pulse
        4s ease-in-out infinite;
}

.trust-core::before,
.trust-core::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.trust-core::before{
    inset:-28px;
    border:
        1px solid
        rgba(196,38,72,.35);
    border-left-color:
        transparent;
    border-bottom-color:
        transparent;
    animation:
        rose-core-rotate
        9s linear infinite;
}

.trust-core::after{
    inset:-58px;
    border:
        1px dashed
        rgba(255,255,255,.12);
    border-right-color:
        rgba(196,38,72,.5);
    animation:
        rose-core-rotate-reverse
        15s linear infinite;
}


/* ========================================================= */
/* 09.6 — SECURITY HUD ELEMENTS                              */
/* ========================================================= */

.trust-visual .trust-core::marker{
    display:none;
}

.trust-visual .security-hud{
    position:absolute;
    z-index:6;
    font-family:
        "Courier New",
        monospace;
    font-size:.58rem;
    letter-spacing:.18em;
    color:rgba(255,255,255,.48);
    text-transform:uppercase;
}

.trust-visual .security-hud::before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:8px;
    border-radius:50%;
    background:rgba(196,38,72,.8);
    box-shadow:
        0 0 10px rgba(196,38,72,.8);
    animation:
        rose-security-blink
        1.6s infinite;
}


/* ========================================================= */
/* 09.7 — TRUST CONTENT                                      */
/* ========================================================= */

.trust-content{
    position:relative;
}

.trust-content > .section-label{
    color:rgba(196,38,72,.82);
}

.trust-content h3{
    position:relative;
    margin-top:14px;
}

.trust-content h3::after{
    content:"";
    display:block;
    width:70px;
    height:1px;
    margin-top:22px;
    background:
        linear-gradient(
        90deg,
        rgba(196,38,72,.9),
        transparent
        );
}


/* ========================================================= */
/* 09.8 — TRUST PRINCIPLES                                   */
/* ========================================================= */

.trust-principles{
    display:grid;
    gap:14px;
    margin-top:38px;
}

.trust-principle{
    position:relative;
    display:grid;
    grid-template-columns:54px 1fr;
    gap:20px;
    padding:24px 26px;
    overflow:hidden;
    border:
        1px solid
        rgba(255,255,255,.065);
    background:
        linear-gradient(
        135deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.012)
        );
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.trust-principle::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:2px;
    height:100%;
    background:
        linear-gradient(
        to bottom,
        transparent,
        rgba(196,38,72,.8),
        transparent
        );
    opacity:.5;
}

.trust-principle:hover{
    transform:
        translateX(8px);
    border-color:
        rgba(196,38,72,.28);
    background:
        linear-gradient(
        135deg,
        rgba(196,38,72,.075),
        rgba(255,255,255,.018)
        );
    box-shadow:
        0 15px 45px rgba(0,0,0,.22),
        0 0 30px rgba(196,38,72,.06);
}

.trust-principle > span{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:
        1px solid
        rgba(196,38,72,.38);
    color:
        rgba(196,38,72,.9);
    font-family:
        "Courier New",
        monospace;
    font-size:.68rem;
    letter-spacing:.08em;
    background:
        rgba(196,38,72,.045);
}

.trust-principle h4{
    margin:0 0 7px;
}

.trust-principle p{
    margin:0;
    color:
        rgba(255,255,255,.62);
}


/* ========================================================= */
/* 09.9 — TRUST HIGHLIGHT / AI SECURITY PROMISE             */
/* ========================================================= */

.trust-highlight{
    position:relative;
    z-index:2;
    margin-top:clamp(70px,9vw,120px);
    padding:
        clamp(45px,7vw,85px)
        clamp(28px,6vw,80px);
    text-align:center;
    overflow:hidden;
    border:
        1px solid
        rgba(196,38,72,.18);
    background:
        radial-gradient(
        circle at center,
        rgba(196,38,72,.09),
        transparent 52%
        ),
        rgba(255,255,255,.018);
    box-shadow:
        0 30px 90px rgba(0,0,0,.32),
        inset 0 0 70px rgba(196,38,72,.025);
}

.trust-highlight::before{
    content:"PROTECTED INTELLIGENCE";
    position:absolute;
    top:24px;
    left:50%;
    transform:
        translateX(-50%);
    font-family:
        "Courier New",
        monospace;
    font-size:.55rem;
    letter-spacing:.35em;
    color:
        rgba(196,38,72,.55);
}

.trust-highlight h2{
    max-width:900px;
    margin:
        18px auto 24px;
}

.trust-highlight p{
    max-width:780px;
    margin-inline:auto;
    color:
        rgba(255,255,255,.64);
}

.trust-symbol{
    position:relative;
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:
        42px auto 0;
    border:
        1px solid
        rgba(196,38,72,.45);
    border-radius:50%;
    color:
        rgba(196,38,72,.9);
    font-size:1.35rem;
    box-shadow:
        0 0 30px rgba(196,38,72,.12);
    animation:
        rose-trust-core-pulse
        4s ease-in-out infinite;
}

.trust-symbol::before{
    content:"";
    position:absolute;
    inset:-10px;
    border:
        1px dashed
        rgba(196,38,72,.24);
    border-radius:50%;
    animation:
        rose-core-rotate
        12s linear infinite;
}


/* ========================================================= */
/* 09.10 — AI SECURITY STATUS STRIP                          */
/* ========================================================= */

.trust-highlight::after{
    content:
        "PRIVACY // CONTROL // RESPONSIBILITY // SECURITY";
    display:block;
    margin-top:34px;
    font-family:
        "Courier New",
        monospace;
    font-size:.58rem;
    letter-spacing:.2em;
    color:
        rgba(255,255,255,.28);
}


/* ========================================================= */
/* 09.11 — TRUST / SECURITY ANIMATIONS                       */
/* ========================================================= */

@keyframes rose-trust-orbit{

    from{
        transform:
            rotate(0deg)
            scale(1);
    }

    to{
        transform:
            rotate(360deg)
            scale(1.02);
    }

}

@keyframes rose-core-rotate{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }

}

@keyframes rose-core-rotate-reverse{

    from{
        transform:
            rotate(360deg);
    }

    to{
        transform:
            rotate(0deg);
    }

}

@keyframes rose-trust-core-pulse{

    0%,
    100%{
        transform:
            scale(1);
        box-shadow:
            0 0 35px rgba(196,38,72,.30),
            0 0 90px rgba(196,38,72,.10),
            inset 0 0 40px rgba(255,255,255,.03);
    }

    50%{
        transform:
            scale(1.035);
        box-shadow:
            0 0 50px rgba(196,38,72,.45),
            0 0 130px rgba(196,38,72,.16),
            inset 0 0 50px rgba(255,255,255,.05);
    }

}

@keyframes rose-security-scan{

    0%,
    100%{
        transform:
            translateY(-55%)
            scaleY(.5);
        opacity:.1;
    }

    50%{
        transform:
            translateY(55%)
            scaleY(1);
        opacity:.7;
    }

}

@keyframes rose-security-blink{

    0%,
    100%{
        opacity:.35;
    }

    50%{
        opacity:1;
    }

}


/* ========================================================= */
/* 09.12 — RESPONSIVE SECURITY SYSTEM                        */
/* ========================================================= */

@media (max-width:900px){

    .trust-layout{
        grid-template-columns:1fr;
    }

    .trust-visual{
        min-height:
            clamp(420px,70vw,560px);
    }

    .trust-content{
        max-width:760px;
        margin-inline:auto;
    }

}

@media (max-width:600px){

    .trust-visual{
        min-height:390px;
    }

    .trust-core{
        width:170px;
        height:170px;
        font-size:1.2rem;
    }

    .trust-principle{
        grid-template-columns:44px 1fr;
        gap:14px;
        padding:20px;
    }

    .trust-principle > span{
        width:34px;
        height:34px;
        font-size:.6rem;
    }

    .trust-highlight{
        padding:
            55px 22px 42px;
    }

    .trust-highlight::after{
        line-height:2;
    }

}


/* ========================================================= */
/* 09.13 — REDUCED MOTION                                    */
/* ========================================================= */

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

    .trust-core,
    .trust-core::before,
    .trust-core::after,
    .trust-visual::before,
    .trust-visual::after,
    .trust-symbol,
    .trust-symbol::before{
        animation:none;
    }

    .trust-principle{
        transition:none;
    }

}
/* ========================================================= */
/* 10 — ROSE AI HUMAN ASSISTANCE / HUMANITY SYSTEM           */
/* ========================================================= */

/* ========================================================= */
/* 10.1 — HUMANITY INTELLIGENCE ENVIRONMENT                   */
/* ========================================================= */

.rose-human-assistance{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(
        circle at 15% 20%,
        rgba(196,38,72,.12),
        transparent 28%
        ),
        radial-gradient(
        circle at 85% 75%,
        rgba(46,105,180,.10),
        transparent 30%
        ),
        linear-gradient(
        135deg,
        #050811,
        #090d1c 52%,
        #050811
        );
}

.rose-human-assistance::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background:
        linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
        ),
        linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
        );
    background-size:58px 58px;
    mask-image:
        linear-gradient(
        to bottom,
        black,
        transparent 92%
        );
}

.rose-human-assistance::after{
    content:"HUMANITY INTELLIGENCE // ACCESSIBILITY // ASSISTANCE";
    position:absolute;
    top:38px;
    right:5%;
    font-family:
        "Courier New",
        monospace;
    font-size:.55rem;
    letter-spacing:.24em;
    color:
        rgba(196,38,72,.28);
    pointer-events:none;
}


/* ========================================================= */
/* 10.2 — ASSISTANCE MAIN LAYOUT                              */
/* ========================================================= */

.assistance-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
        minmax(320px,.9fr)
        minmax(420px,1.1fr);
    gap:clamp(40px,6vw,95px);
    align-items:center;
    margin-top:clamp(55px,8vw,100px);
}


/* ========================================================= */
/* 10.3 — HUMANITY VISUAL CORE                                */
/* ========================================================= */

.assistance-visual{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
    border:
        1px solid
        rgba(255,255,255,.07);
    background:
        radial-gradient(
        circle at center,
        rgba(196,38,72,.17),
        transparent 25%
        ),
        radial-gradient(
        circle at center,
        rgba(32,86,160,.12),
        transparent 58%
        ),
        rgba(4,7,17,.75);
}

.assistance-visual::before{
    content:"";
    position:absolute;
    inset:10%;
    border:
        1px solid
        rgba(196,38,72,.14);
    border-radius:50%;
    animation:
        rose-human-orbit
        22s linear infinite;
}

.assistance-visual::after{
    content:"";
    position:absolute;
    width:80%;
    height:1px;
    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(196,38,72,.55),
        transparent
        );
    animation:
        rose-human-scan
        5s ease-in-out infinite;
}


/* ========================================================= */
/* 10.4 — ASSISTANCE CORE                                    */
/* ========================================================= */

.assistance-core{
    position:relative;
    z-index:5;
    width:230px;
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:
        1px solid
        rgba(196,38,72,.55);
    border-radius:50%;
    background:
        radial-gradient(
        circle at 32% 28%,
        rgba(255,255,255,.14),
        transparent 20%
        ),
        radial-gradient(
        circle,
        rgba(196,38,72,.34),
        rgba(7,11,24,.96) 65%
        );
    box-shadow:
        0 0 45px rgba(196,38,72,.34),
        0 0 130px rgba(196,38,72,.12),
        inset 0 0 50px rgba(255,255,255,.035);
    animation:
        rose-human-core-pulse
        4.5s ease-in-out infinite;
}

.assistance-core > span{
    position:relative;
    z-index:3;
    color:#fff;
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:.35em;
    padding-left:.35em;
}

.assistance-core::before{
    content:"";
    position:absolute;
    inset:-32px;
    border:
        1px solid
        rgba(196,38,72,.3);
    border-left-color:
        transparent;
    border-bottom-color:
        transparent;
    border-radius:50%;
    animation:
        rose-human-rotate
        10s linear infinite;
}

.assistance-core::after{
    content:"";
    position:absolute;
    inset:-62px;
    border:
        1px dashed
        rgba(255,255,255,.10);
    border-right-color:
        rgba(196,38,72,.45);
    border-radius:50%;
    animation:
        rose-human-rotate-reverse
        16s linear infinite;
}

.assistance-core-ring{
    position:absolute;
    inset:-90px;
    border:
        1px solid
        rgba(196,38,72,.08);
    border-radius:50%;
    box-shadow:
        0 0 50px rgba(196,38,72,.05);
}


/* ========================================================= */
/* 10.5 — HUMAN ASSISTANCE CONTENT                           */
/* ========================================================= */

.assistance-content{
    position:relative;
}

.assistance-content > .section-label{
    color:
        rgba(196,38,72,.82);
}

.assistance-content h3{
    margin-top:14px;
}

.assistance-content h3::after{
    content:"";
    display:block;
    width:78px;
    height:1px;
    margin-top:22px;
    background:
        linear-gradient(
        90deg,
        rgba(196,38,72,.9),
        transparent
        );
}


/* ========================================================= */
/* 10.6 — HUMANITY ASSISTANCE CARDS                          */
/* ========================================================= */

.assistance-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:clamp(55px,8vw,95px);
}

.assistance-card{
    position:relative;
    min-height:340px;
    padding:32px 28px;
    overflow:hidden;
    border:
        1px solid
        rgba(255,255,255,.065);
    background:
        linear-gradient(
        145deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.012)
        );
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.assistance-card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(196,38,72,.75),
        transparent
        );
    transform:
        scaleX(.25);
    transform-origin:center;
    transition:
        transform .45s ease;
}

.assistance-card:hover{
    transform:
        translateY(-10px);
    border-color:
        rgba(196,38,72,.28);
    box-shadow:
        0 25px 70px rgba(0,0,0,.28),
        0 0 35px rgba(196,38,72,.06);
}

.assistance-card:hover::before{
    transform:
        scaleX(1);
}

.assistance-number{
    display:block;
    font-family:
        "Courier New",
        monospace;
    font-size:.65rem;
    letter-spacing:.2em;
    color:
        rgba(196,38,72,.72);
}

.assistance-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:
        25px 0 22px;
    border:
        1px solid
        rgba(196,38,72,.28);
    border-radius:50%;
    font-size:1.55rem;
    background:
        rgba(196,38,72,.045);
    box-shadow:
        0 0 28px rgba(196,38,72,.08);
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.assistance-card:hover .assistance-icon{
    transform:
        scale(1.1)
        rotate(5deg);
    box-shadow:
        0 0 38px rgba(196,38,72,.18);
}

.assistance-card h3{
    margin-bottom:12px;
}

.assistance-card p{
    color:
        rgba(255,255,255,.58);
}

.assistance-status{
    position:absolute;
    left:28px;
    bottom:25px;
    font-family:
        "Courier New",
        monospace;
    font-size:.53rem;
    letter-spacing:.16em;
    color:
        rgba(255,255,255,.3);
}

.assistance-status::before{
    content:"";
    display:inline-block;
    width:5px;
    height:5px;
    margin-right:8px;
    border-radius:50%;
    background:
        rgba(196,38,72,.75);
    box-shadow:
        0 0 10px rgba(196,38,72,.65);
    animation:
        rose-human-status
        1.8s infinite;
}


/* ========================================================= */
/* 10.7 — HUMANITY PROGRAM HIGHLIGHT                         */
/* ========================================================= */

.assistance-highlight{
    position:relative;
    z-index:2;
    margin-top:clamp(65px,9vw,110px);
    padding:
        clamp(45px,7vw,85px)
        clamp(28px,6vw,85px);
    text-align:center;
    overflow:hidden;
    border:
        1px solid
        rgba(196,38,72,.18);
    background:
        radial-gradient(
        circle at center,
        rgba(196,38,72,.08),
        transparent 55%
        ),
        rgba(255,255,255,.018);
    box-shadow:
        0 30px 90px rgba(0,0,0,.3);
}

.assistance-highlight::before{
    content:"ARS HUMANITY PROGRAM // AI FOR PEOPLE";
    position:absolute;
    top:25px;
    left:50%;
    transform:
        translateX(-50%);
    white-space:nowrap;
    font-family:
        "Courier New",
        monospace;
    font-size:.55rem;
    letter-spacing:.27em;
    color:
        rgba(196,38,72,.48);
}

.assistance-highlight h2{
    max-width:920px;
    margin:
        18px auto 26px;
}

.assistance-highlight p{
    max-width:800px;
    margin-inline:auto;
    color:
        rgba(255,255,255,.63);
}

.assistance-highlight-mark{
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:
        42px auto 0;
    border:
        1px solid
        rgba(196,38,72,.4);
    border-radius:50%;
    color:
        rgba(196,38,72,.9);
    font-size:1.35rem;
    box-shadow:
        0 0 35px rgba(196,38,72,.1);
    animation:
        rose-human-core-pulse
        4s ease-in-out infinite;
}


/* ========================================================= */
/* 10.8 — HUMANITY SYSTEM CONNECTOR LINES                    */
/* ========================================================= */

.assistance-grid::before{
    content:"";
    position:absolute;
    top:-30px;
    left:16.66%;
    right:16.66%;
    height:1px;
    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(196,38,72,.25),
        transparent
        );
    pointer-events:none;
}


/* ========================================================= */
/* 10.9 — HUMANITY ANIMATIONS                                */
/* ========================================================= */

@keyframes rose-human-orbit{

    from{
        transform:
            rotate(0deg)
            scale(1);
    }

    to{
        transform:
            rotate(360deg)
            scale(1.03);
    }

}

@keyframes rose-human-rotate{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }

}

@keyframes rose-human-rotate-reverse{

    from{
        transform:
            rotate(360deg);
    }

    to{
        transform:
            rotate(0deg);
    }

}

@keyframes rose-human-core-pulse{

    0%,
    100%{
        transform:
            scale(1);
        box-shadow:
            0 0 42px rgba(196,38,72,.28),
            0 0 110px rgba(196,38,72,.08),
            inset 0 0 45px rgba(255,255,255,.025);
    }

    50%{
        transform:
            scale(1.035);
        box-shadow:
            0 0 55px rgba(196,38,72,.42),
            0 0 145px rgba(196,38,72,.14),
            inset 0 0 55px rgba(255,255,255,.045);
    }

}

@keyframes rose-human-scan{

    0%,
    100%{
        transform:
            translateY(-220px);
        opacity:.05;
    }

    50%{
        transform:
            translateY(220px);
        opacity:.65;
    }

}

@keyframes rose-human-status{

    0%,
    100%{
        opacity:.35;
    }

    50%{
        opacity:1;
    }

}


/* ========================================================= */
/* 10.10 — RESPONSIVE HUMANITY SYSTEM                        */
/* ========================================================= */

@media (max-width:1100px){

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

}

@media (max-width:900px){

    .assistance-layout{
        grid-template-columns:1fr;
    }

    .assistance-visual{
        min-height:
            clamp(430px,70vw,560px);
    }

    .assistance-content{
        max-width:760px;
        margin-inline:auto;
    }

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

}

@media (max-width:600px){

    .assistance-grid{
        grid-template-columns:1fr;
    }

    .assistance-card{
        min-height:320px;
    }

    .assistance-visual{
        min-height:390px;
    }

    .assistance-core{
        width:175px;
        height:175px;
    }

    .assistance-core > span{
        font-size:1.15rem;
    }

    .assistance-highlight{
        padding:
            55px 22px 42px;
    }

    .assistance-highlight::before{
        white-space:normal;
        width:80%;
        line-height:1.8;
    }

}


/* ========================================================= */
/* 10.11 — REDUCED MOTION                                    */
/* ========================================================= */

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

    .assistance-core,
    .assistance-core::before,
    .assistance-core::after,
    .assistance-visual::before,
    .assistance-visual::after,
    .assistance-highlight-mark,
    .assistance-status::before{
        animation:none;
    }

    .assistance-card,
    .assistance-icon{
        transition:none;
    }

    }
/* ========================================================= */
/* 11 — ROSE AI EVOLUTION / FUTURE INTELLIGENCE SYSTEM      */
/* ========================================================= */

/* ========================================================= */
/* 11.1 — FUTURE INTELLIGENCE ENVIRONMENT                    */
/* ========================================================= */

.rose-roadmap{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(
        circle at 12% 18%,
        rgba(196,38,72,.11),
        transparent 28%
        ),
        radial-gradient(
        circle at 88% 72%,
        rgba(52,116,190,.10),
        transparent 30%
        ),
        linear-gradient(
        135deg,
        #040711,
        #080d1b 48%,
        #040711
        );
}

.rose-roadmap::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.2;
    background:
        linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
        ),
        linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
        );
    background-size:64px 64px;
}

.rose-roadmap::after{
    content:"ROSE INTELLIGENCE // EVOLUTION ENGINE // FUTURE SYSTEM";
    position:absolute;
    top:40px;
    right:5%;
    font-family:
        "Courier New",
        monospace;
    font-size:.52rem;
    letter-spacing:.25em;
    color:
        rgba(196,38,72,.3);
    pointer-events:none;
}


/* ========================================================= */
/* 11.2 — EVOLUTION TIMELINE                                 */
/* ========================================================= */

.rose-roadmap-timeline{
    position:relative;
    max-width:1050px;
    margin:
        clamp(65px,9vw,110px)
        auto 0;
    padding:
        20px 0 30px;
}

.roadmap-line{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    transform:
        translateX(-50%);
    background:
        linear-gradient(
        to bottom,
        transparent,
        rgba(196,38,72,.5) 8%,
        rgba(196,38,72,.18) 50%,
        rgba(196,38,72,.5) 92%,
        transparent
        );
}

.roadmap-line::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:5px;
    height:110px;
    transform:
        translateX(-50%);
    background:
        linear-gradient(
        to bottom,
        transparent,
        rgba(196,38,72,.95),
        transparent
        );
    box-shadow:
        0 0 18px rgba(196,38,72,.7);
    animation:
        rose-roadmap-data-flow
        4s linear infinite;
}


/* ========================================================= */
/* 11.3 — ROADMAP STAGES                                     */
/* ========================================================= */

.roadmap-stage{
    position:relative;
    width:calc(50% - 55px);
    margin-bottom:48px;
    padding:32px;
    border:
        1px solid
        rgba(255,255,255,.065);
    background:
        linear-gradient(
        145deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.012)
        );
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.roadmap-stage:nth-of-type(odd){
    margin-right:auto;
}

.roadmap-stage:nth-of-type(even){
    margin-left:auto;
}

.roadmap-stage::before{
    content:"";
    position:absolute;
    top:50%;
    width:55px;
    height:1px;
    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(196,38,72,.5)
        );
}

.roadmap-stage:nth-of-type(odd)::before{
    right:-55px;
}

.roadmap-stage:nth-of-type(even)::before{
    left:-55px;
    transform:
        rotate(180deg);
}

.roadmap-stage:hover{
    transform:
        translateY(-8px);
    border-color:
        rgba(196,38,72,.3);
    box-shadow:
        0 25px 70px rgba(0,0,0,.3),
        0 0 40px rgba(196,38,72,.07);
}


/* ========================================================= */
/* 11.4 — ROADMAP MARKER                                     */
/* ========================================================= */

.roadmap-marker{
    position:absolute;
    top:50%;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:
        translateY(-50%);
    border:
        1px solid
        rgba(196,38,72,.55);
    border-radius:50%;
    background:
        #070b17;
    color:
        rgba(255,255,255,.85);
    font-family:
        "Courier New",
        monospace;
    font-size:.65rem;
    letter-spacing:.12em;
    box-shadow:
        0 0 0 8px rgba(196,38,72,.035),
        0 0 28px rgba(196,38,72,.18);
    z-index:4;
}

.roadmap-stage:nth-of-type(odd) .roadmap-marker{
    right:-82px;
}

.roadmap-stage:nth-of-type(even) .roadmap-marker{
    left:-82px;
}

.roadmap-marker::before{
    content:"";
    position:absolute;
    inset:6px;
    border:
        1px solid
        rgba(196,38,72,.2);
    border-radius:50%;
    animation:
        rose-roadmap-marker
        3s ease-in-out infinite;
}


/* ========================================================= */
/* 11.5 — ROADMAP CONTENT                                    */
/* ========================================================= */

.roadmap-content h3{
    margin:
        12px 0 14px;
}

.roadmap-content p{
    color:
        rgba(255,255,255,.57);
}

.roadmap-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:22px;
    padding:
        7px 11px;
    border:
        1px solid
        rgba(196,38,72,.18);
    background:
        rgba(196,38,72,.035);
    color:
        rgba(255,255,255,.38);
    font-family:
        "Courier New",
        monospace;
    font-size:.5rem;
    letter-spacing:.15em;
}

.roadmap-tag::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:
        rgba(196,38,72,.8);
    box-shadow:
        0 0 10px rgba(196,38,72,.6);
}


/* ========================================================= */
/* 11.6 — FUTURE INTELLIGENCE HIGHLIGHT                       */
/* ========================================================= */

.roadmap-highlight{
    position:relative;
    max-width:980px;
    margin:
        clamp(70px,10vw,125px)
        auto 0;
    padding:
        clamp(45px,7vw,80px)
        clamp(28px,6vw,80px);
    text-align:center;
    overflow:hidden;
    border:
        1px solid
        rgba(196,38,72,.18);
    background:
        radial-gradient(
        circle at center,
        rgba(196,38,72,.075),
        transparent 58%
        ),
        rgba(255,255,255,.015);
}

.roadmap-highlight::before{
    content:"EVOLUTION PROTOCOL // ACTIVE";
    position:absolute;
    top:24px;
    left:50%;
    transform:
        translateX(-50%);
    font-family:
        "Courier New",
        monospace;
    font-size:.5rem;
    letter-spacing:.24em;
    color:
        rgba(196,38,72,.45);
}

.roadmap-highlight h2{
    max-width:800px;
    margin:
        18px auto 25px;
}

.roadmap-highlight p{
    max-width:760px;
    margin-inline:auto;
    color:
        rgba(255,255,255,.6);
}

.roadmap-symbol{
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:
        42px auto 0;
    border:
        1px solid
        rgba(196,38,72,.4);
    border-radius:50%;
    color:
        rgba(196,38,72,.9);
    font-size:1.25rem;
    box-shadow:
        0 0 40px rgba(196,38,72,.1);
    animation:
        rose-roadmap-core
        4s ease-in-out infinite;
}


/* ========================================================= */
/* 11.7 — FUTURE INTELLIGENCE DATA LAYERS                     */
/* ========================================================= */

.rose-roadmap-timeline::before{
    content:"V1  ─────  V2+  ─────  PERSONALIZATION  ─────  ECOSYSTEM  ─────  FUTURE";
    position:absolute;
    top:-42px;
    left:50%;
    width:100%;
    transform:
        translateX(-50%);
    text-align:center;
    font-family:
        "Courier New",
        monospace;
    font-size:.48rem;
    letter-spacing:.12em;
    color:
        rgba(255,255,255,.16);
    white-space:nowrap;
}

.rose-roadmap-timeline::after{
    content:"10+ YEAR INTELLIGENCE VISION";
    position:absolute;
    bottom:-30px;
    left:50%;
    transform:
        translateX(-50%);
    font-family:
        "Courier New",
        monospace;
    font-size:.5rem;
    letter-spacing:.2em;
    color:
        rgba(196,38,72,.4);
    white-space:nowrap;
}


/* ========================================================= */
/* 11.8 — ROADMAP ANIMATIONS                                  */
/* ========================================================= */

@keyframes rose-roadmap-data-flow{

    0%{
        top:0;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    85%{
        opacity:1;
    }

    100%{
        top:calc(100% - 110px);
        opacity:0;
    }

}

@keyframes rose-roadmap-marker{

    0%,
    100%{
        transform:
            scale(1);
        opacity:.55;
    }

    50%{
        transform:
            scale(1.12);
        opacity:1;
    }

}

@keyframes rose-roadmap-core{

    0%,
    100%{
        transform:
            scale(1);
        box-shadow:
            0 0 30px rgba(196,38,72,.08);
    }

    50%{
        transform:
            scale(1.05);
        box-shadow:
            0 0 55px rgba(196,38,72,.2);
    }

}


/* ========================================================= */
/* 11.9 — RESPONSIVE EVOLUTION SYSTEM                         */
/* ========================================================= */

@media (max-width:900px){

    .rose-roadmap-timeline{
        max-width:760px;
        padding-left:58px;
    }

    .roadmap-line{
        left:24px;
        transform:none;
    }

    .roadmap-stage,
    .roadmap-stage:nth-of-type(odd),
    .roadmap-stage:nth-of-type(even){
        width:100%;
        margin:
            0 0 38px;
    }

    .roadmap-stage::before{
        display:none;
    }

    .roadmap-stage:nth-of-type(odd) .roadmap-marker,
    .roadmap-stage:nth-of-type(even) .roadmap-marker{
        left:-84px;
        right:auto;
    }

    .rose-roadmap-timeline::before{
        left:58px;
        width:auto;
        transform:none;
        text-align:left;
        white-space:normal;
        line-height:1.8;
    }

}

@media (max-width:600px){

    .rose-roadmap-timeline{
        padding-left:45px;
    }

    .roadmap-line{
        left:18px;
    }

    .roadmap-stage{
        padding:26px 22px;
    }

    .roadmap-stage:nth-of-type(odd) .roadmap-marker,
    .roadmap-stage:nth-of-type(even) .roadmap-marker{
        left:-59px;
        width:42px;
        height:42px;
        font-size:.55rem;
    }

    .rose-roadmap-timeline::before{
        display:none;
    }

    .rose-roadmap-timeline::after{
        font-size:.42rem;
    }

    .roadmap-highlight{
        padding:
            55px 22px 42px;
    }

}


/* ========================================================= */
/* 11.10 — REDUCED MOTION                                    */
/* ========================================================= */

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

    .roadmap-line::before,
    .roadmap-marker::before,
    .roadmap-symbol{
        animation:none;
    }

    .roadmap-stage{
        transition:none;
    }

    }
/* ========================================================= */
/* 12 — ROSE AI FINAL IMMERSIVE CORE / INTERACTIVE CTA      */
/* ========================================================= */

/* ========================================================= */
/* 12.1 — FINAL ROSE INTELLIGENCE ENVIRONMENT                */
/* ========================================================= */

.rose-final-vision{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
        radial-gradient(
        circle at 50% 42%,
        rgba(196,38,72,.15),
        transparent 22%
        ),
        radial-gradient(
        circle at 20% 80%,
        rgba(39,91,166,.10),
        transparent 30%
        ),
        radial-gradient(
        circle at 85% 15%,
        rgba(196,38,72,.07),
        transparent 28%
        ),
        linear-gradient(
        135deg,
        #03050c,
        #080b17 48%,
        #03050c
        );
}

.rose-final-vision::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.2;
    background:
        linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
        ),
        linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
        );
    background-size:60px 60px;
    mask-image:
        radial-gradient(
        ellipse at center,
        black 0%,
        transparent 78%
        );
}

.rose-final-vision::after{
    content:"ROSE AI // FINAL INTELLIGENCE CORE // SYSTEM ACTIVE";
    position:absolute;
    top:38px;
    left:50%;
    transform:
        translateX(-50%);
    white-space:nowrap;
    font-family:
        "Courier New",
        monospace;
    font-size:.5rem;
    letter-spacing:.28em;
    color:
        rgba(196,38,72,.4);
    pointer-events:none;
}


/* ========================================================= */
/* 12.2 — FINAL IMMERSIVE CORE CONTAINER                      */
/* ========================================================= */

.rose-final-vision-inner{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:
        minmax(360px,.9fr)
        minmax(420px,1.1fr);
    gap:clamp(50px,7vw,110px);
    align-items:center;
    min-height:720px;
    padding:
        clamp(45px,6vw,90px);
    overflow:hidden;
    border:
        1px solid
        rgba(196,38,72,.18);
    background:
        radial-gradient(
        circle at 25% 50%,
        rgba(196,38,72,.07),
        transparent 40%
        ),
        rgba(255,255,255,.012);
    box-shadow:
        0 40px 120px rgba(0,0,0,.42),
        inset 0 0 100px rgba(196,38,72,.025);
}

.rose-final-vision-inner::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
        90deg,
        transparent 0%,
        rgba(196,38,72,.05) 50%,
        transparent 100%
        );
    animation:
        rose-final-light-sweep
        8s ease-in-out infinite;
}


/* ========================================================= */
/* 12.3 — FINAL ROSE CORE VISUAL                              */
/* ========================================================= */

.rose-final-visual{
    position:relative;
    min-height:580px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}

.rose-final-core{
    position:relative;
    z-index:5;
    width:250px;
    height:250px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:
        1px solid
        rgba(196,38,72,.62);
    border-radius:50%;
    background:
        radial-gradient(
        circle at 32% 25%,
        rgba(255,255,255,.12),
        transparent 20%
        ),
        radial-gradient(
        circle,
        rgba(196,38,72,.38),
        rgba(5,8,18,.98) 67%
        );
    box-shadow:
        0 0 50px rgba(196,38,72,.4),
        0 0 150px rgba(196,38,72,.14),
        inset 0 0 65px rgba(255,255,255,.035);
    animation:
        rose-final-core-pulse
        5s ease-in-out infinite;
}

.rose-final-core::before{
    content:"";
    position:absolute;
    inset:-24px;
    border:
        1px solid
        rgba(196,38,72,.35);
    border-radius:50%;
    border-top-color:
        transparent;
    border-bottom-color:
        transparent;
    animation:
        rose-final-spin
        12s linear infinite;
}

.rose-final-core::after{
    content:"";
    position:absolute;
    inset:-58px;
    border:
        1px dashed
        rgba(255,255,255,.1);
    border-left-color:
        rgba(196,38,72,.5);
    border-radius:50%;
    animation:
        rose-final-spin-reverse
        18s linear infinite;
}

.rose-final-symbol{
    position:relative;
    z-index:2;
    font-size:4.2rem;
    line-height:1;
    filter:
        drop-shadow(
        0 0 22px
        rgba(196,38,72,.65)
        );
    animation:
        rose-final-symbol-float
        4s ease-in-out infinite;
}

.rose-final-name{
    position:relative;
    z-index:2;
    color:
        rgba(255,255,255,.92);
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:.42em;
    padding-left:.42em;
}

.rose-final-orbit{
    position:absolute;
    border:
        1px solid
        rgba(196,38,72,.14);
    border-radius:50%;
    pointer-events:none;
}

.rose-final-orbit.orbit-one{
    width:390px;
    height:390px;
    animation:
        rose-final-spin
        24s linear infinite;
}

.rose-final-orbit.orbit-two{
    width:500px;
    height:500px;
    border-style:dashed;
    border-color:
        rgba(255,255,255,.07);
    animation:
        rose-final-spin-reverse
        32s linear infinite;
}

.rose-final-orbit.orbit-three{
    width:620px;
    height:620px;
    border-color:
        rgba(196,38,72,.06);
    animation:
        rose-final-spin
        45s linear infinite;
}


/* ========================================================= */
/* 12.4 — FINAL INTELLIGENCE DATA NODES                       */
/* ========================================================= */

.rose-final-visual::before,
.rose-final-visual::after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:
        rgba(196,38,72,.9);
    box-shadow:
        0 0 18px rgba(196,38,72,.75);
}

.rose-final-visual::before{
    top:20%;
    left:14%;
    animation:
        rose-final-data-node
        4s ease-in-out infinite;
}

.rose-final-visual::after{
    right:12%;
    bottom:18%;
    animation:
        rose-final-data-node
        5s ease-in-out infinite reverse;
}


/* ========================================================= */
/* 12.5 — FINAL INTELLIGENCE CONTENT                          */
/* ========================================================= */

.rose-final-content{
    position:relative;
    z-index:4;
}

.rose-final-content > .section-label{
    color:
        rgba(196,38,72,.82);
}

.rose-final-content h2{
    max-width:760px;
    margin:
        16px 0 28px;
}

.rose-final-content > p{
    max-width:760px;
    color:
        rgba(255,255,255,.6);
}

.rose-final-statement{
    position:relative;
    margin-top:38px;
    padding:
        28px 30px;
    border-left:
        2px solid
        rgba(196,38,72,.6);
    background:
        linear-gradient(
        90deg,
        rgba(196,38,72,.06),
        transparent
        );
}

.rose-final-statement h3{
    margin-bottom:14px;
}

.rose-final-statement p{
    color:
        rgba(255,255,255,.52);
}

.rose-final-quote{
    margin-top:38px;
}

.rose-final-quote h3{
    margin:
        6px 0;
    color:
        rgba(255,255,255,.9);
}


/* ========================================================= */
/* 12.6 — FINAL PRINCIPLES                                   */
/* ========================================================= */

.rose-final-principles{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:32px;
}

.final-principle{
    position:relative;
    min-height:180px;
    padding:
        28px 24px;
    overflow:hidden;
    border:
        1px solid
        rgba(255,255,255,.06);
    background:
        linear-gradient(
        145deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.01)
        );
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.final-principle::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(196,38,72,.75),
        transparent
        );
    transform:
        scaleX(.2);
    transition:
        transform .4s ease;
}

.final-principle:hover{
    transform:
        translateY(-8px);
    border-color:
        rgba(196,38,72,.25);
    box-shadow:
        0 25px 60px rgba(0,0,0,.3);
}

.final-principle:hover::after{
    transform:
        scaleX(1);
}

.final-principle > span{
    display:block;
    margin-bottom:18px;
    color:
        rgba(196,38,72,.88);
    font-family:
        "Courier New",
        monospace;
    font-size:.72rem;
    letter-spacing:.22em;
}

.final-principle p{
    color:
        rgba(255,255,255,.52);
}


/* ========================================================= */
/* 12.7 — FINAL INTERACTIVE AI PORTAL                        */
/* ========================================================= */

.rose-final-closing{
    position:relative;
    z-index:4;
    margin-top:
        clamp(45px,7vw,80px);
    padding:
        clamp(55px,8vw,100px)
        clamp(25px,6vw,70px);
    text-align:center;
    overflow:hidden;
    border:
        1px solid
        rgba(196,38,72,.2);
    background:
        radial-gradient(
        circle at center,
        rgba(196,38,72,.09),
        transparent 58%
        ),
        rgba(255,255,255,.012);
}

.rose-final-closing::before{
    content:"AI CORE // INTERACTION PORTAL // READY";
    position:absolute;
    top:25px;
    left:50%;
    transform:
        translateX(-50%);
    font-family:
        "Courier New",
        monospace;
    font-size:.5rem;
    letter-spacing:.23em;
    color:
        rgba(196,38,72,.5);
    white-space:nowrap;
}

.closing-line{
    width:
        min(320px,60%);
    height:1px;
    margin:
        0 auto 38px;
    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(196,38,72,.65),
        transparent
        );
}

.rose-final-closing h2{
    max-width:800px;
    margin:
        0 auto 22px;
}

.rose-final-closing > p{
    max-width:700px;
    margin-inline:auto;
    color:
        rgba(255,255,255,.58);
}

.rose-final-signature{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:
        42px auto 24px;
    color:
        rgba(255,255,255,.85);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.25em;
}

.signature-rose{
    font-size:2.4rem;
    filter:
        drop-shadow(
        0 0 18px
        rgba(196,38,72,.6)
        );
    animation:
        rose-final-symbol-float
        4s ease-in-out infinite;
}

.final-tagline{
    font-family:
        "Courier New",
        monospace;
    font-size:.65rem;
    letter-spacing:.15em;
    line-height:2;
    color:
        rgba(255,255,255,.32)!important;
}


/* ========================================================= */
/* 12.8 — LIVE INTELLIGENCE SIGNALS                           */
/* ========================================================= */

.rose-final-closing::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    top:50%;
    left:50%;
    transform:
        translate(-50%,-50%);
    border:
        1px solid
        rgba(196,38,72,.06);
    border-radius:50%;
    box-shadow:
        0 0 0 35px rgba(196,38,72,.02),
        0 0 0 70px rgba(196,38,72,.015);
    pointer-events:none;
    animation:
        rose-final-portal-pulse
        5s ease-in-out infinite;
}


/* ========================================================= */
/* 12.9 — FINAL ANIMATIONS                                   */
/* ========================================================= */

@keyframes rose-final-core-pulse{

    0%,
    100%{
        transform:scale(1);
        box-shadow:
            0 0 50px rgba(196,38,72,.34),
            0 0 140px rgba(196,38,72,.1),
            inset 0 0 55px rgba(255,255,255,.025);
    }

    50%{
        transform:scale(1.045);
        box-shadow:
            0 0 70px rgba(196,38,72,.5),
            0 0 180px rgba(196,38,72,.18),
            inset 0 0 70px rgba(255,255,255,.05);
    }

}

@keyframes rose-final-spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes rose-final-spin-reverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

@keyframes rose-final-symbol-float{

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

    50%{
        transform:
            translateY(-7px);
    }

}

@keyframes rose-final-data-node{

    0%,
    100%{
        transform:
            scale(.7);
        opacity:.3;
    }

    50%{
        transform:
            scale(1.4);
        opacity:1;
    }

}

@keyframes rose-final-light-sweep{

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

    25%{
        opacity:1;
    }

    60%{
        opacity:.5;
    }

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

}

@keyframes rose-final-portal-pulse{

    0%,
    100%{
        transform:
            translate(-50%,-50%)
            scale(.8);
        opacity:.25;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.2);
        opacity:.65;
    }

}


/* ========================================================= */
/* 12.10 — RESPONSIVE FINAL IMMERSIVE CORE                    */
/* ========================================================= */

@media (max-width:1050px){

    .rose-final-vision-inner{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .rose-final-visual{
        min-height:560px;
    }

    .rose-final-content{
        max-width:800px;
        margin-inline:auto;
    }

    .rose-final-principles{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media (max-width:700px){

    .rose-final-vision{
        min-height:auto;
    }

    .rose-final-vision-inner{
        padding:
            28px 20px 45px;
    }

    .rose-final-vision::after{
        font-size:.4rem;
        letter-spacing:.16em;
    }

    .rose-final-visual{
        min-height:420px;
    }

    .rose-final-core{
        width:185px;
        height:185px;
    }

    .rose-final-symbol{
        font-size:3rem;
    }

    .rose-final-name{
        font-size:.9rem;
    }

    .rose-final-orbit.orbit-one{
        width:280px;
        height:280px;
    }

    .rose-final-orbit.orbit-two{
        width:360px;
        height:360px;
    }

    .rose-final-orbit.orbit-three{
        width:440px;
        height:440px;
    }

    .rose-final-principles{
        grid-template-columns:1fr;
    }

    .final-principle{
        min-height:150px;
    }

    .rose-final-closing{
        padding:
            60px 20px 45px;
    }

    .rose-final-closing::before{
        white-space:normal;
        width:80%;
        line-height:1.8;
    }

}


/* ========================================================= */
/* 12.11 — REDUCED MOTION                                    */
/* ========================================================= */

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

    .rose-final-core,
    .rose-final-core::before,
    .rose-final-core::after,
    .rose-final-orbit,
    .rose-final-symbol,
    .rose-final-visual::before,
    .rose-final-visual::after,
    .rose-final-vision-inner::before,
    .rose-final-closing::after,
    .signature-rose{
        animation:none;
    }

    .final-principle{
        transition:none;
    }

    }








/* ========================================================= */
/*                                                         */
/*       END OF ARS GLOBAL VISUAL DNA                      */
/*       START OF ARS COMPANY UNIQUE DESIGN                */
/*                                                         */
/* ========================================================= */