/* =========================================================
   ARS BRAIN — LUXURY DESIGN TEST
   =========================================================

   DESIGN REFERENCE:
   "13 A's" VISUAL LANGUAGE

   CORE DNA:


   Deep Black

   Warm Metallic Gold
   Bronze
   Premium Dark Glass
   Soft Gold Light
   Cinematic Depth
   Elegant Typography
   Subtle Motion
   ========================================================= */


/* =========================================================
   ARS BRAIN — PREMIUM DESIGN TOKENS
   REFERENCE:
   THE 13 A'S — ARS VISUAL LANGUAGE

   CORE BRAND:
   Deep Black
   Warm Metallic Gold
   Warm White
   Deep Navy

   SUPPORTING LIGHT / SHADOW COLORS:
   Rich Bronze
   Warm Brown
   Deep Red
   Warm Yellow


   DESIGN DIRECTION:
   BLACK dominates the visual field.
   GOLD and BRONZE create the premium identity.
   WHITE creates clarity and contrast.
   NAVY adds controlled cinematic depth.

   Supporting colors are used to build:
   metallic reflections,
   cinematic shadows,
   glass depth,
   warm highlights,
   premium dimensionality.
   ========================================================= */


/* =========================================================
   01 — DESIGN TOKENS
   ========================================================= */

:root{


    /* =====================================================
       01 — BRAND FOUNDATION
       ===================================================== */


    /* ---------- DEEP BLACK ---------- */

    --ars-black:
        #030303;

    --ars-black-soft:
        #070707;

    --ars-black-warm:
        #0C0906;

    --ars-black-brown:
        #120D08;


    /* =====================================================
       02 — PRIMARY BRAND GOLD
       GOLD PRESENCE — SIGNIFICANTLY INCREASED
       ===================================================== */


    /* Main ARS Gold */

    --ars-gold:
        #D0AA63;


    /* Champagne Gold */

    --ars-gold-light:
        #E7C987;


    /* Soft Warm Gold */

    --ars-gold-soft:
        #DDBA73;


    /* Deep Gold */

    --ars-gold-dark:
        #956A35;


    /* Golden Highlight */

    --ars-gold-highlight:
        #FFF2C2;


    /* Almost White Gold */

    --ars-gold-white:
        #FFF8DF;


    /* Warm Golden Yellow
       Used only for metallic light */

    --ars-gold-yellow:
        #E7C35F;


    /* =====================================================
       03 — METALLIC GOLD DEPTH SYSTEM
       BRONZE + GOLD ARE STRONGER
       ===================================================== */


    /*
       Metallic structure:

       Deep Shadow
       ↓
       Warm Brown
       ↓
       Rich Bronze
       ↓
       Deep Gold
       ↓
       Main Gold
       ↓
       Champagne
       ↓
       White Gold Highlight
    */


    --ars-metal-shadow:
        #583719;


    --ars-metal-brown:
        #7A4F27;


    --ars-metal-bronze:
        #A8753D;


    --ars-metal-gold:
        #D0AA63;


    --ars-metal-champagne:
        #E7C987;


    --ars-metal-highlight:
        #FFF2C2;


    /* =====================================================
       04 — BRONZE
       SIGNIFICANTLY INCREASED
       ===================================================== */


    --ars-bronze:
        #895E32;

    --ars-bronze-soft:
        #B98247;

    --ars-bronze-light:
        #D0A060;


    /* Extra Rich Bronze */

    --ars-bronze-rich:
        #9F6D38;


    /* =====================================================
       05 — DEEP NAVY
       BRAND SUPPORT COLOR
       INCREASED ~18–28%
       ===================================================== */


    /*
       Navy remains secondary.

       It should be visible in:
       glass depth,
       cool shadows,
       background gradients,
       cinematic contrast.

       It must NEVER overpower
       Black + Gold.
    */


    --ars-navy:
        #0B1A2A;

    --ars-navy-soft:
        #122336;

    --ars-navy-light:
        #1A3047;

    --ars-navy-glow:
        rgba(38,59,62,.33);


    /* =====================================================
       06 — WARM WHITE
       ===================================================== */


    --ars-white:
        #F5F1E8;

    --ars-white-soft:
        #D9D2C6;

    --ars-white-muted:
        #ADA59A;


    /* =====================================================
       07 — SUPPORTING SHADOW COLORS
       ===================================================== */


    /* Warm Brown Shadow */

    --ars-shadow-brown:
        #3B2111;


    /* Deep Red Shadow
       Very subtle cinematic warmth */

    --ars-shadow-red:
        #291011;


    /* Warm Yellow Shadow */

    --ars-shadow-yellow:
        #624817;


    /* Deep Navy Shadow */

    --ars-shadow-navy:
        #07111C;


    /* =====================================================
       08 — GOLDEN LIGHT SYSTEM
       GOLD LIGHT SIGNIFICANTLY INCREASED
       ===================================================== */


    /* Soft Gold Light */

    --ars-gold-glow:
        rgba(275,189,102,.35);


    /* Medium Gold Light */

    --ars-gold-glow-medium:
        rgba(270,199,99,.40);


    /* Strong Gold Light */

    --ars-gold-glow-strong:
        rgba(231,201,120,.48);


    /* White Gold Highlight */

    --ars-white-gold-glow:
        rgba(255,242,194,.26);


    /* Bronze Atmospheric Glow */

    --ars-bronze-glow:
        rgba(195,165,58,.40);


    /* =====================================================
       09 — GLASS SYSTEM
       WARMER + MORE PREMIUM
       ===================================================== */


    /* Main Premium Dark Glass */

    --ars-glass:
        rgba(26,19,12,.90);


    /* Warm Glass */

    --ars-glass-warm:
        rgba(45,32,19,.79);


    /* Navy Glass Reflection */

    --ars-glass-navy:
        rgba(32,40,55,.50);


    /* Glass Highlight */

    --ars-glass-light:
        rgba(295,290,299,.089);


    /* Glass Border */

    --ars-glass-border:
        rgba(235,198,120,.40);


    /* Glass Border Hover */

    --ars-glass-border-hover:
        rgba(231,201,135,.88);


    /* =====================================================
       10 — GLASS SHADOW
       ===================================================== */


    --ars-glass-shadow:
        rgba(0,0,0,.60);


    --ars-glass-shadow-deep:
        rgba(0,0,0,.80);


    /* =====================================================
       11 — BRAND RADIUS
       ===================================================== */


    --ars-radius:
        22px;

    --ars-radius-small:
        14px;

    --ars-radius-large:
        30px;


    /* =====================================================
       12 — TRANSITION
       ===================================================== */


    --ars-transition:
        .45s cubic-bezier(.2,.8,.2,1);


    /* =====================================================
       13 — METALLIC GOLD GRADIENT
       STRONGER GOLD + BRONZE PRESENCE
       ===================================================== */


    --ars-metallic-gold:

        linear-gradient(

            105deg,

            #583719 0%,

            #7A4F27 12%,

            #9F6D38 22%,

            #A8753D 30%,

            #D0AA63 42%,

            #E7C987 52%,

            #FFF2C2 58%,

            #E7C987 65%,

            #D0AA63 76%,

            #A8753D 86%,

            #7A4F27 94%,

            #583719 100%

        );


    /* =====================================================
       14 — PREMIUM GOLD LINE
       ===================================================== */


    --ars-gold-line:

        linear-gradient(

            90deg,

            transparent 0%,

            #7A4F27 10%,

            #A8753D 22%,

            #D0AA63 35%,

            #E7C987 45%,

            #FFF2C2 50%,

            #E7C987 55%,

            #D0AA63 65%,

            #A8753D 78%,

            #7A4F27 90%,

            transparent 100%

        );


    /* =====================================================
       15 — CINEMATIC BACKGROUND LIGHT
       STRONGER GOLD + BRONZE
       ===================================================== */


    --ars-cinematic-gold:

        radial-gradient(

            circle,

            rgba(235,187,99,.15),

            rgba(189,143,76,.8) 32%,

            rgba(245,199,115,.035) 52%,

            transparent 85%

        );


    /* Cinematic Bronze Atmosphere */

    --ars-cinematic-bronze:

        radial-gradient(

            circle,

            rgba(169,117,61,.16),

            rgba(90,55,25,.07) 42%,

            transparent 85%

        );


    /* Cinematic Navy */

    --ars-cinematic-navy:

        radial-gradient(

            circle,

            rgba(12,26,42,.30),

            transparent 85%

        );


    /* =====================================================
       16 — PREMIUM CARD BACKGROUND
       ===================================================== */


    --ars-card-background:

        linear-gradient(

            145deg,

            rgba(31,21,13,.70),

            rgba(10,9,8,.86) 42%,

            rgba(5,8,13,.95) 100%

        );


    /* =====================================================
       17 — PREMIUM CARD SHADOW
       STRONGER GOLDEN PRESENCE
       ===================================================== */


    --ars-card-shadow:

        0 20px 60px
        rgba(0,0,0,.62),

        0 0 25px
        rgba(208,170,99,.12),

        0 0 55px
        rgba(169,117,61,.06),

        inset 0 1px 0
        rgba(255,242,194,.09);

    /* =====================================================
       18 — PREMIUM CARD HOVER
       ===================================================== */


    --ars-card-shadow-hover:

        0 35px 80px
        rgba(0,0,0,.74),

        0 0 40px
        rgba(208,170,99,.24),

        0 0 85px
        rgba(185,117,61,.12),

        0 0 100px
        rgba(17,30,53,.08),

        inset 0 6px 0
        rgba(285,272,194,.18);

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(198,161,91,.055),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            #050505 0%,
            #080706 45%,
            #050505 100%
        );

    color:
        var(--ars-white);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.8;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   03 — GLOBAL CONTAINER
   ========================================================= */

.container{

    width:
        min(1180px, calc(100% - 64px));

    margin:
        0 auto;

    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   04 — SECTION SPACING
   ========================================================= */

section{

    position:
        relative;

    padding:
        110px 0;

    overflow:
        hidden;
}


/* =========================================================
   05 — PREMIUM SECTION HEADINGS
   ========================================================= */

.section-heading{

    max-width:
        850px;

    margin:
        0 auto 70px;

    text-align:
        center;

}


.section-label{

    display:
        inline-block;

    margin-bottom:
        18px;

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

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

    position:
        relative;

}


/* Gold line under section label */

.section-label::after{

    content:
        "";

    display:
        block;

    width:
        34px;

    height:
        1px;

    margin:
        10px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ars-gold),
            transparent
        );

    box-shadow:
        0 0 10px
        rgba(198,161,91,.35);

}


.section-heading h2{

    color:
        var(--ars-white);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height:
        1.18;

    font-weight:
        500;

    letter-spacing:
        -.025em;

    margin-bottom:
        22px;

}


.section-heading p{

    max-width:
        720px;

    margin:
        0 auto;

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

    font-size:
        15px;

    line-height:
        1.9;

}


/* =========================================================
   06 — PREMIUM GLASS SYSTEM
   ========================================================= */

.ars-glass{

    position:
        relative;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ),

        var(--ars-glass);

    border:
        1px solid
        var(--ars-glass-border);

    border-radius:
        var(--ars-radius);

    backdrop-filter:
        blur(20px);

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

    box-shadow:

        0 25px 70px
        rgba(0,0,0,.45),

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

        inset 0 0 40px
        rgba(198,161,91,.018);

    transition:
        transform var(--ars-transition),
        border-color var(--ars-transition),
        box-shadow var(--ars-transition);

}


/* Premium light reflection */

.ars-glass::before{

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226,194,122,.45),
            transparent
        );

    opacity:
        .45;

}


/* =========================================================
   07 — LUXURY GLASS HOVER
   ========================================================= */

.ars-glass:hover{

    transform:
        translateY(-8px);

    border-color:
        var(--ars-glass-border-hover);

    box-shadow:

        0 35px 90px
        rgba(0,0,0,.55),

        0 0 35px
        var(--ars-gold-glow),

        inset 0 1px 0
        rgba(226,194,122,.12);

}


/* =========================================================
   08 — PREMIUM CARDS
   ========================================================= */

.pillar-card,
.architecture-card,
.family-card,
.feature-card,
.platform-card,
.haven-card,
.rose-card,
.zhr-card,
.os-card,
.future-card,
.roadmap-item,
.vision-card{

    padding:
        34px;

    min-height:
        240px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

}


.pillar-card h3,
.architecture-card h3,
.family-card h3,
.feature-card h3,
.platform-card h3,
.haven-card h3,
.rose-card h3,
.zhr-card h3,
.os-card h3,
.future-card h3,
.roadmap-item h3,
.vision-card h3{

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

    font-size:
        19px;

    font-weight:
        500;

    letter-spacing:
        -.01em;

    margin:
        14px 0 12px;

}


.pillar-card p,
.architecture-card p,
.family-card p,
.feature-card p,
.platform-card p,
.haven-card p,
.rose-card p,
.zhr-card p,
.os-card p,
.future-card p,
.roadmap-item p,
.vision-card p{

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

    font-size:
        14px;

    line-height:
        1.85;

}


/* =========================================================
   09 — GOLD NUMBERS
   ========================================================= */

.pillar-number,
.roadmap-year{

    color:
        var(--ars-gold);

    font-size:
        11px;

    letter-spacing:
        .25em;

    font-weight:
        600;

}


/* =========================================================
   10 — ICONS
   ========================================================= */

.pillar-card::after,
.family-card::after,
.feature-card::after,
.haven-card::after,
.rose-card::after,
.zhr-card::after,
.os-card::after,
.future-card::after{

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -30px;

    bottom:
        -30px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(198,161,91,.12),
            transparent 70%
        );

    pointer-events:
        none;

}


/* =========================================================
   11 — GOLD ICON
   ========================================================= */

.family-icon,
.haven-icon,
.rose-icon,
.zhr-icon,
.os-icon,
.future-icon{

    font-size:
        28px;

    filter:
        grayscale(.15);

    opacity:
        .9;

    transition:
        transform var(--ars-transition),
        filter var(--ars-transition);

}


.ars-glass:hover
.family-icon,
.ars-glass:hover
.haven-icon,
.ars-glass:hover
.rose-icon,
.ars-glass:hover
.zhr-icon,
.ars-glass:hover
.os-icon,
.ars-glass:hover
.future-icon{

    transform:
        translateY(-3px)
        scale(1.08);

    filter:
        drop-shadow(
            0 0 10px
            rgba(198,161,91,.45)
        );

}


/* =========================================================
   12 — PREMIUM BUTTONS
   ========================================================= */

.hero-buttons{

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        30px;

}


.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 26px;

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        12px;

    letter-spacing:
        .08em;

    transition:
        var(--ars-transition);

}


.btn-primary{

    color:
        #0A0805;

    background:
        linear-gradient(
            135deg,
            var(--ars-gold-light),
            var(--ars-gold)
        );

    box-shadow:
        0 10px 30px
        rgba(198,161,91,.18);

}


.btn-secondary{

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

    border:
        1px solid
        rgba(198,161,91,.35);

    background:
        rgba(198,161,91,.035);

}


.btn-primary:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 40px
        rgba(198,161,91,.35);

}


.btn-secondary:hover{

    transform:
        translateY(-3px);

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

    background:
        rgba(198,161,91,.08);

    box-shadow:
        0 0 25px
        rgba(198,161,91,.15);

}


/* =========================================================
   13 — IMAGE GLASS
   ========================================================= */

.arsbrain-image,
.intro-image,
.architecture-image,
.platform-visual,
.haven-image,
.rose-image,
.zhr-image,
.os-image,
.future-right{

    border:
        1px solid
        var(--ars-glass-border);

    border-radius:
        var(--ars-radius);

    overflow:
        hidden;

    background:
        rgba(10,9,7,.65);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.5);

}


.arsbrain-image img,
.intro-image img,
.architecture-image img,
.platform-visual img,
.haven-image img,
.rose-image img,
.zhr-image img,
.os-image img,
.future-right img{

    width:
        100%;

    height:
        auto;

    display:
        block;

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

}


.arsbrain-image:hover img,
.intro-image:hover img,
.architecture-image:hover img,
.platform-visual:hover img,
.haven-image:hover img,
.rose-image:hover img,
.zhr-image:hover img,
.os-image:hover img,
.future-right:hover img{

    transform:
        scale(1.025);

}


/* =========================================================
   14 — HIGHLIGHT PANELS
   ========================================================= */

.pillars-message,
.platform-highlight,
.rose-message,
.zhr-philosophy,
.zhr-status,
.os-highlight,
.os-status,
.future-roadmap,
.future-vision,
.roadmap-message,
.vision-quote,
.ecosystem-note{

    padding:
        50px;

    margin-top:
        70px;

    text-align:
        center;

}


.pillars-message h2,
.platform-highlight h2,
.rose-message h2,
.zhr-philosophy h2,
.zhr-status h2,
.os-highlight h2,
.os-status h2,
.future-roadmap h2,
.future-vision h2,
.roadmap-message h2,
.vision-quote h2,
.ecosystem-note h2{

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

    font-size:
        clamp(25px, 3vw, 36px);

    font-weight:
        500;

    margin-bottom:
        16px;

}


.pillars-message p,
.platform-highlight p,
.rose-message p,
.zhr-philosophy p,
.zhr-status p,
.os-highlight p,
.os-status p,
.future-roadmap p,
.future-vision p,
.roadmap-message p,
.vision-quote p,
.ecosystem-note p{

    max-width:
        760px;

    margin:
        0 auto;

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

    font-size:
        14px;

    line-height:
        1.9;

}


/* =========================================================
   15 — SUBTLE GOLD ATMOSPHERE
   ========================================================= */

section::before{

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        20%;

    left:
        50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(198,161,91,.035),
            transparent 70%
        );

    pointer-events:
        none;

}


/* =========================================================
   16 — SCROLL REVEAL
   ========================================================= */

@keyframes arsReveal{

    from{

        opacity:
            0;

        transform:
            translateY(35px);

    }

    to{

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.ars-glass{

    animation:
        arsReveal .9s ease both;

}


/* =========================================================
   17 — GOLD LIGHT SWEEP
   ========================================================= */

@keyframes arsGoldSweep{

    0%{
        transform:
            translateX(-120%);
    }

    100%{
        transform:
            translateX(120%);
    }

}


.ars-glass::after{

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -100%;

    width:
        45%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226,194,122,.045),
            transparent
        );

    transform:
        skewX(-20deg);

    pointer-events:
        none;

    opacity:
        0;

}


.ars-glass:hover::after{

    opacity:
        1;

    animation:
        arsGoldSweep 1.2s ease;

}


/* =========================================================
   18 — RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .container{

        width:
            min(100% - 36px, 700px);

    }

    section{

        padding:
            80px 0;

    }

    .section-heading{

        margin-bottom:
            45px;

    }

    .pillar-card,
    .architecture-card,
    .family-card,
    .feature-card,
    .platform-card,
    .haven-card,
    .rose-card,
    .zhr-card,
    .os-card,
    .future-card,
    .roadmap-item,
    .vision-card{

        padding:
            26px;

        min-height:
            auto;

    }

    .pillars-message,
    .platform-highlight,
    .rose-message,
    .zhr-philosophy,
    .zhr-status,
    .os-highlight,
    .os-status,
    .future-roadmap,
    .future-vision,
    .roadmap-message,
    .vision-quote,
    .ecosystem-note{

        padding:
            34px 25px;

    }

}


@media(max-width:600px){

    body{

        font-size:
            14px;

    }

    .container{

        width:
            calc(100% - 28px);

    }

    section{

        padding:
            65px 0;

    }

    .section-heading h2{

        font-size:
            28px;

    }

    .section-heading p{

        font-size:
            14px;

    }

    .hero-buttons{

        flex-direction:
            column;

    }

    .btn-primary,
    .btn-secondary{

        width:
            100%;

    }

    .ars-glass:hover{

        transform:
            translateY(-4px);

    }

}

/* =========================================================
   ARS BRAIN — JS SCROLL REVEAL
   ========================================================= */

.ars-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.ars-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   PREMIUM CARD HOVER
   ========================================================= */

.ars-card-hover {
    transform: translateY(-8px);
}



/* =========================================================
   ARS BRAIN TEST — STEP 02
   PREMIUM GOLD / BLUE GLASS CARDS
   ========================================================= */

.ars-glass,
.pillar-card,
.feature-card,
.family-card,
.haven-card,
.rose-card,
.zhr-card,
.os-card,
.future-card,
.architecture-card,
.vision-card {

    position: relative;

    background:

        linear-gradient(
            135deg,
            rgba(214, 173, 92, 0.14),
            rgba(28, 43, 58, 0.42) 48%,
            rgba(7, 9, 12, 0.72)
        );

    border:

        1px solid
        rgba(214, 173, 92, 0.38);

    box-shadow:

        0 18px 45px
        rgba(0, 0, 0, 0.45),

        0 0 22px
        rgba(214, 173, 92, 0.08),

        inset 0 1px 0
        rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(18px);

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

    transition:

        transform 0.45s ease,

        border-color 0.45s ease,

        box-shadow 0.45s ease,

        background 0.45s ease;

}


/* =========================================================
   GOLDEN LIGHT LINE
   ========================================================= */

.ars-glass::before,
.pillar-card::before,
.feature-card::before,
.family-card::before,
.haven-card::before,
.rose-card::before,
.zhr-card::before,
.os-card::before,
.future-card::before,
.architecture-card::before,
.vision-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 8%;

    width: 84%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(242, 213, 141, 0.9),
            transparent
        );

    opacity: 0.7;

}


/* =========================================================
   GOLDEN GLOW HOVER
   ========================================================= */

.ars-glass:hover,
.pillar-card:hover,
.feature-card:hover,
.family-card:hover,
.haven-card:hover,
.rose-card:hover,
.zhr-card:hover,
.os-card:hover,
.future-card:hover,
.architecture-card:hover,
.vision-card:hover {

    transform:

        translateY(-8px);

    border-color:

        rgba(242, 213, 141, 0.75);

    background:

        linear-gradient(
            135deg,
            rgba(214, 173, 92, 0.22),
            rgba(38, 61, 86, 0.48),
            rgba(7, 9, 12, 0.72)
        );

    box-shadow:

        0 25px 65px
        rgba(0, 0, 0, 0.58),

        0 0 35px
        rgba(214, 173, 92, 0.18),

        inset 0 1px 0
        rgba(255, 255, 255, 0.12);

}


/* =========================================================
   GOLD HEADINGS INSIDE CARDS
   ========================================================= */

.ars-glass h2,
.ars-glass h3,
.pillar-card h2,
.pillar-card h3,
.feature-card h2,
.feature-card h3,
.family-card h2,
.family-card h3,
.haven-card h2,
.haven-card h3,
.rose-card h2,
.rose-card h3,
.zhr-card h2,
.zhr-card h3,
.os-card h2,
.os-card h3,
.future-card h2,
.future-card h3,
.architecture-card h2,
.architecture-card h3,
.vision-card h2,
.vision-card h3 {

    color:

        #e7c979;

    text-shadow:

        0 0 18px
        rgba(214, 173, 92, 0.16);

}


/* =========================================================
   ARS BRAIN — PREMIUM DARK GLASS CARDS
   BLACK + GOLD + DEEP NAVY
   ========================================================= */


/* ---------- CARD BASE ---------- */

body.brain-test-page .ars-glass,
body.brain-test-page .pillar-card,
body.brain-test-page .feature-card,
body.brain-test-page .family-card,
body.brain-test-page .haven-card,
body.brain-test-page .rose-card,
body.brain-test-page .zhr-card,
body.brain-test-page .os-card,
body.brain-test-page .future-card,
body.brain-test-page .architecture-card,
body.brain-test-page .vision-card {

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018) 35%,
            rgba(8,8,8,.72) 100%
        ),

        rgba(10,10,10,.58);

    border:

        1px solid
        rgba(198,161,91,.32);

    border-radius:

        22px;

    backdrop-filter:

        blur(22px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(22px)
        saturate(125%);

    box-shadow:

        0 20px 55px
        rgba(0,0,0,.58),

        0 0 25px
        rgba(198,161,91,.06),

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

    transition:

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

        border-color .45s ease,

        box-shadow .55s ease;

}


/* =========================================================
   GOLDEN GLASS REFLECTION
   ========================================================= */

body.brain-test-page .ars-glass::before,
body.brain-test-page .pillar-card::before,
body.brain-test-page .feature-card::before,
body.brain-test-page .family-card::before,
body.brain-test-page .haven-card::before,
body.brain-test-page .rose-card::before,
body.brain-test-page .zhr-card::before,
body.brain-test-page .os-card::before,
body.brain-test-page .future-card::before,
body.brain-test-page .architecture-card::before,
body.brain-test-page .vision-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(226,194,122,.16),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 90%,
            rgba(17,29,43,.18),
            transparent 35%
        );

    opacity: .85;

}


/* =========================================================
   TOP GLASS HIGHLIGHT
   ========================================================= */

body.brain-test-page .ars-glass::after,
body.brain-test-page .pillar-card::after,
body.brain-test-page .feature-card::after,
body.brain-test-page .family-card::after,
body.brain-test-page .haven-card::after,
body.brain-test-page .rose-card::after,
body.brain-test-page .zhr-card::after,
body.brain-test-page .os-card::after,
body.brain-test-page .future-card::after,
body.brain-test-page .architecture-card::after,
body.brain-test-page .vision-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: 8%;

    width: 84%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(198,161,91,.25),
            rgba(255,240,189,.75),
            rgba(198,161,91,.25),
            transparent
        );

    opacity: .8;

}


/* =========================================================
   HOVER — LUXURY GOLDEN LIGHT
   ========================================================= */

body.brain-test-page .ars-glass:hover,
body.brain-test-page .pillar-card:hover,
body.brain-test-page .feature-card:hover,
body.brain-test-page .family-card:hover,
body.brain-test-page .haven-card:hover,
body.brain-test-page .rose-card:hover,
body.brain-test-page .zhr-card:hover,
body.brain-test-page .os-card:hover,
body.brain-test-page .future-card:hover,
body.brain-test-page .architecture-card:hover,
body.brain-test-page .vision-card:hover {

    transform:

        translateY(-10px);

    border-color:

        rgba(226,194,122,.75);

    box-shadow:

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

        0 0 32px
        rgba(198,161,91,.18),

        0 0 70px
        rgba(198,161,91,.07),

        inset 0 1px 0
        rgba(255,240,189,.14);

}

/* =========================================================
   ARS BRAIN — MOTION VISUAL LAYER
   ========================================================= */


/* ---------- 3D CARD BASE ---------- */

body.brain-test-page
.ars-brain-motion-ready
.ars-glass,
body.brain-test-page
.ars-brain-motion-ready
.pillar-card,
body.brain-test-page
.ars-brain-motion-ready
.feature-card,
body.brain-test-page
.ars-brain-motion-ready
.family-card,
body.brain-test-page
.ars-brain-motion-ready
.haven-card,
body.brain-test-page
.ars-brain-motion-ready
.rose-card,
body.brain-test-page
.ars-brain-motion-ready
.zhr-card,
body.brain-test-page
.ars-brain-motion-ready
.os-card,
body.brain-test-page
.ars-brain-motion-ready
.future-card,
body.brain-test-page
.ars-brain-motion-ready
.architecture-card,
body.brain-test-page
.ars-brain-motion-ready
.vision-card {

    transform:

        perspective(1000px)

        translateY(
            calc(
                var(--ars-scroll-depth, 0px)
                * -0.18
            )
        )

        rotateX(
            var(--ars-rotate-x, 0deg)
        )

        rotateY(
            var(--ars-rotate-y, 0deg)
        );

    transform-style:
        preserve-3d;

    will-change:
        transform;

}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

body.brain-test-page
.ars-card-reveal {

    opacity:
        0;

    transform:

        perspective(1000px)

        translateY(45px)

        rotateX(7deg)

        scale(.97);

    transition:

        opacity .8s ease,

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

    transition-delay:
        var(--ars-card-delay, 0ms);

}


body.brain-test-page
.ars-card-reveal.ars-card-visible {

    opacity:
        1;

    transform:

        perspective(1000px)

        translateY(
            calc(
                var(--ars-scroll-depth, 0px)
                * -0.18
            )
        )

        rotateX(
            var(--ars-rotate-x, 0deg)
        )

        rotateY(
            var(--ars-rotate-y, 0deg)
        )

        scale(1);

}


/* =========================================================
   GOLDEN LIGHT TRACKING
   ========================================================= */

body.brain-test-page
.ars-golden-light {

    position:
        absolute;

    pointer-events:
        none;

    width:
        260px;

    height:
        260px;

    left:
        var(--ars-mouse-x, 50%);

    top:
        var(--ars-mouse-y, 50%);

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

    background:

        radial-gradient(

            circle,

            rgba(255,225,150,.22),

            rgba(198,161,91,.10)
            30%,

            transparent
            70%

        );

    filter:
        blur(18px);

    opacity:
        0;

    transition:
        opacity .45s ease;

    mix-blend-mode:
        screen;

}


body.brain-test-page
.ars-card-tilt
.ars-golden-light {

    opacity:
        1;

}


/* =========================================================
   GLASS DEPTH
   ========================================================= */

body.brain-test-page
.ars-card-tilt {

    backdrop-filter:

        blur(26px)
        saturate(145%);

    -webkit-backdrop-filter:

        blur(26px)
        saturate(145%);

    box-shadow:

        0 35px 80px
        rgba(0,0,0,.72),

        0 0 35px
        rgba(198,161,91,.20),

        inset 0 1px 0
        rgba(255,240,190,.15);

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    body.brain-test-page
    * {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}












/* =====================================================
   ARS BRAIN HERO IMAGE — RESPONSIVE CONTAIN
   ===================================================== */

.arsbrain-hero .hero-visual {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arsbrain-hero .hero-visual img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
}

/* MOBILE PORTRAIT */
@media (max-width: 700px) {

    .arsbrain-hero .hero-visual {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
    }

    .arsbrain-hero .hero-visual img {
        width: 100%;
        height: auto !important;
        max-width: 100%;
        object-fit: contain !important;
    }
}

/* MOBILE LANDSCAPE */
@media (min-width: 701px) and (max-width: 1024px) {

    .arsbrain-hero .hero-visual {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .arsbrain-hero .hero-visual img {
        width: 100%;
        height: auto !important;
        max-width: 100%;
        object-fit: contain !important;
    }
}




/* =========================================================
   ARS BRAIN — ARCHITECTURE DIGITAL TWIN MOTION v1
   ========================================================= */

.arsbrain-architecture .architecture-image {
    position: relative !important;
    overflow: hidden !important;
}

.ars-architecture-motion-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: scale(.985);
    transition:
        opacity 1.2s ease,
        transform 1.8s cubic-bezier(.2,.8,.2,1);
}

/* ---------------------------------
   Digital Twin Grid
---------------------------------- */

.ars-digital-grid {
    position: absolute;
    inset: 12%;
    opacity: .18;

    background-image:
        linear-gradient(
            rgba(57,191,255,.22) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(57,191,255,.22) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.65) 45%,
            transparent 82%
        );

    animation: arsDigitalGridMove 14s linear infinite;
}

/* ---------------------------------
   Vehicle Scan
---------------------------------- */

.ars-scan-line {
    position: absolute;
    left: 7%;
    right: 7%;
    top: -10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.15),
            rgba(255,255,255,.95),
            rgba(201,164,92,.55),
            transparent
        );

    box-shadow:
        0 0 8px rgba(57,191,255,.35),
        0 0 20px rgba(57,191,255,.14);

    opacity: 0;

    animation:
        arsVehicleScan 3.2s
        cubic-bezier(.45,0,.25,1)
        infinite;
}

/* ---------------------------------
   ARS Brain Core
---------------------------------- */

.ars-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff 0%,
            #f0d28b 28%,
            #c9a45c 52%,
            transparent 72%
        );

    box-shadow:
        0 0 8px rgba(255,255,255,.95),
        0 0 20px rgba(228,189,104,.75),
        0 0 38px rgba(201,164,92,.42),
        0 0 65px rgba(57,191,255,.22);

    opacity: 0;

    animation:
        arsBrainCorePulse 3.8s
        ease-in-out infinite;
}

.ars-core span {
    position: absolute;
    inset: -15px;

    border: 1px solid rgba(228,189,104,.42);
    border-radius: 50%;

    animation: arsCoreRing 5s linear infinite;
}

/* ---------------------------------
   Data Nodes
---------------------------------- */

.ars-data-node {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #79ddff;

    box-shadow:
        0 0 7px rgba(121,221,255,.9),
        0 0 18px rgba(57,191,255,.42);

    opacity: 0;

    animation:
        arsNodeActivation
        3.2s ease-in-out infinite;
}

.node-01 {
    left: 19%;
    top: 35%;
}

.node-02 {
    left: 31%;
    top: 66%;
    animation-delay: .6s;
}

.node-03 {
    right: 26%;
    top: 31%;
    animation-delay: 1.1s;
}

.node-04 {
    right: 17%;
    bottom: 28%;
    animation-delay: 1.7s;
}

/* ---------------------------------
   Data Lines
---------------------------------- */

.ars-data-line {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(57,191,255,0),
            rgba(57,191,255,.72),
            rgba(201,164,92,.48),
            rgba(57,191,255,0)
        );

    box-shadow:
        0 0 7px rgba(57,191,255,.20);

    opacity: 0;
}

.line-01 {
    width: 34%;
    left: 20%;
    top: 35%;
    transform: rotate(15deg);
}

.line-02 {
    width: 27%;
    left: 32%;
    top: 66%;
    transform: rotate(-18deg);
}

.line-03 {
    width: 31%;
    right: 19%;
    top: 34%;
    transform: rotate(162deg);
}

/* ---------------------------------
   Data Packets
---------------------------------- */

.ars-data-packet {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 7px rgba(255,255,255,.95),
        0 0 15px rgba(57,191,255,.72);

    opacity: 0;
}

.packet-01 {
    left: 20%;
    top: 35%;

    animation:
        arsPacket01 2.8s
        linear infinite;
}

.packet-02 {
    left: 32%;
    top: 66%;

    animation:
        arsPacket02 3.4s
        linear infinite;

    animation-delay: .8s;
}

.packet-03 {
    right: 20%;
    top: 34%;

    animation:
        arsPacket03 3s
        linear infinite;

    animation-delay: 1.4s;
}

/* ---------------------------------
   Activation
---------------------------------- */

.ars-architecture-active
.ars-architecture-motion-layer {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------
   Settle State
---------------------------------- */

.ars-architecture-settled
.ars-architecture-motion-layer {
    opacity: .78;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes arsVehicleScan {

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

    12% {
        opacity: 1;
    }

    78% {
        opacity: .85;
    }

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

@keyframes arsBrainCorePulse {

    0%,100% {
        opacity: .55;
        transform:
            translate(-50%,-50%)
            scale(.75);
    }

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

@keyframes arsCoreRing {

    from {
        transform: scale(.7);
        opacity: .15;
    }

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

    to {
        transform: scale(2.1);
        opacity: 0;
    }
}

@keyframes arsNodeActivation {

    0%,100% {
        opacity: .15;
        transform: scale(.7);
    }

    35% {
        opacity: 1;
        transform: scale(1.25);
    }

    65% {
        opacity: .5;
    }
}

@keyframes arsDigitalGridMove {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(42px,42px,0);
    }
}

@keyframes arsPacket01 {

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

    15% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    100% {
        transform: translate(220px,58px);
        opacity: 0;
    }
}

@keyframes arsPacket02 {

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

    15% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    100% {
        transform: translate(170px,-55px);
        opacity: 0;
    }
}

@keyframes arsPacket03 {

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

    15% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    100% {
        transform: translate(-190px,70px);
        opacity: 0;
    }
}

/* ---------------------------------
   Reduced Motion
---------------------------------- */

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

    .ars-architecture-motion-layer *,
    .ars-architecture-motion-layer {
        animation: none !important;
        transition: none !important;
    }

   }


/* =========================================================
   ARS BRAIN — ARCHITECTURE SCANNER REFINEMENT
   SLOWER / ELECTRIC BLUE + GOLD / BRONZE
   ========================================================= */

.arsbrain-architecture .ars-scan-line {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(87,220,255,1.2) 18%,
            rgba(87,220,255,1) 35%,
            rgba(181,241,255,1.5) 50%,
            rgba(228,230,144,1.2) 65%,
            rgba(231,199,110,.7) 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(87,191,255,.8),
        0 0 16px rgba(87,191,255,.44),
        0 0 28px rgba(201,164,92,.5) !important;

    /* نصف سرعت قبلی */
    animation-duration: 8.4s !important;
}














/* =========================================================
   ARS BRAIN HERO — INDEPENDENT IDENTITY SYSTEM
   ========================================================= */

/*
   IMPORTANT:
   The ARS BRAIN logo is NOT attached to the Hero image.
   It exists as an independent identity object.
*/


/* =========================================================
   IDENTITY AREA
   ========================================================= */

.arsbrain-hero {
    position: relative;
    overflow: hidden;
}

.arsbrain-hero .ars-hero-identity {

    position: relative;

    width: 100%;
    height: 190px;

    margin-top: -10px;

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

    isolation: isolate;

    pointer-events: none;

    z-index: 8;
}


/* =========================================================
   LOGO OBJECT
   ========================================================= */

.ars-identity-logo {

    position: relative;

    width: clamp(125px, 15vw, 185px);
    height: clamp(125px, 15vw, 185px);

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

    z-index: 20;

    opacity: 0;

    animation:
        arsIdentityReveal
        2.2s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


/* =========================================================
   ACTUAL LOGO
   ========================================================= */

.ars-identity-logo img {

    position: relative;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    z-index: 10;

    /*
       The image itself remains untouched.
       This only creates atmospheric separation.
    */

    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.28))
        drop-shadow(0 0 14px rgba(57,191,255,.32))
        drop-shadow(0 0 28px rgba(228,189,104,.22))
        drop-shadow(0 0 48px rgba(201,164,92,.12));

    animation:
        arsIdentityBreath
        5.8s
        ease-in-out
        2.2s
        infinite;
}


/* =========================================================
   GOLD + ELECTRIC BLUE AURA
   ========================================================= */

.ars-logo-aura {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 175%;
    height: 175%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(255,242,194,.22) 0%,

            rgba(228,189,104,.18) 17%,

            rgba(201,164,92,.13) 32%,

            rgba(57,191,255,.10) 48%,

            rgba(57,191,255,.045) 63%,

            transparent 78%
        );

    filter: blur(20px);

    opacity: .72;

    z-index: 1;

    animation:
        arsIdentityAura
        6.5s
        ease-in-out
        infinite;
}


/* =========================================================
   LIGHT ENERGY GOING TOWARD HERO IMAGE
   ========================================================= */

.ars-identity-energy {

    position: absolute;

    left: 50%;
    top: 0;

    width: 100%;
    height: 100%;

    transform: translateX(-50%);

    z-index: 3;

    pointer-events: none;
}


/*
   Main vertical intelligence beam
*/

.ars-identity-energy::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -95px;

    width: 1px;
    height: 145px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(57,191,255,.04) 15%,
            rgba(57,191,255,.20) 42%,
            rgba(121,221,255,.55) 63%,
            rgba(228,189,104,.75) 82%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(57,191,255,.20),
        0 0 18px rgba(57,191,255,.10),
        0 0 28px rgba(228,189,104,.08);

    opacity: .72;

    animation:
        arsIdentityBeamPulse
        4.8s
        ease-in-out
        infinite;
}


/* =========================================================
   THREE ENERGY STREAMS
   ========================================================= */

.ars-energy-beam {

    position: absolute;

    bottom: 50%;

    height: 1px;

    transform-origin: left center;

    opacity: 0;

}


/* Blue stream */

.beam-1 {

    left: 52%;

    width: 31%;

    transform: rotate(-10deg);

    background:
        linear-gradient(
            90deg,
            rgba(57,191,255,.75),
            rgba(121,221,255,.28),
            transparent
        );

    box-shadow:
        0 0 7px rgba(57,191,255,.30),
        0 0 20px rgba(57,191,255,.12);

    animation:
        arsEnergyStream1
        6s
        ease-in-out
        infinite;
}


/* Gold stream */

.beam-2 {

    left: 51%;

    width: 28%;

    transform: rotate(7deg);

    background:
        linear-gradient(
            90deg,
            rgba(228,189,104,.70),
            rgba(201,164,92,.25),
            transparent
        );

    box-shadow:
        0 0 7px rgba(228,189,104,.26),
        0 0 18px rgba(201,164,92,.10);

    animation:
        arsEnergyStream2
        7s
        ease-in-out
        .8s
        infinite;
}


/* Cyan stream */

.beam-3 {

    left: 48%;

    width: 25%;

    transform: rotate(-4deg);

    background:
        linear-gradient(
            90deg,
            rgba(121,221,255,.58),
            rgba(57,191,255,.18),
            transparent
        );

    box-shadow:
        0 0 6px rgba(57,191,255,.20),
        0 0 17px rgba(57,191,255,.08);

    animation:
        arsEnergyStream3
        5.5s
        ease-in-out
        1.4s
        infinite;
}


/* =========================================================
   ORBIT SYSTEM
   ========================================================= */

.ars-identity-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 270px;
    height: 100px;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);

    z-index: 5;

    pointer-events: none;
}


.ars-orbit-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border: 1px solid transparent;

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

    opacity: .35;
}


/* Gold ring */

.ring-1 {

    width: 235px;
    height: 78px;

    border-top-color:
        rgba(228,189,104,.48);

    border-bottom-color:
        rgba(201,164,92,.12);

    animation:
        arsOrbitSpin
        11s
        linear
        infinite;
}


/* Blue ring */

.ring-2 {

    width: 205px;
    height: 62px;

    border-left-color:
        rgba(57,191,255,.38);

    border-right-color:
        rgba(57,191,255,.08);

    transform:
        translate(-50%, -50%)
        rotate(55deg);

    animation:
        arsOrbitSpinReverse
        14s
        linear
        infinite;
}


/* Inner ring */

.ring-3 {

    width: 160px;
    height: 48px;

    border-top-color:
        rgba(121,221,255,.22);

    animation:
        arsOrbitSpin
        8s
        linear
        infinite;
}


/* =========================================================
   LOGO CORE
   ========================================================= */

.ars-logo-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff8df 0%,
            #e7c987 32%,
            #d0aa63 58%,
            transparent 100%
        );

    box-shadow:

        0 0 7px
        rgba(255,242,194,.90),

        0 0 17px
        rgba(228,189,104,.65),

        0 0 32px
        rgba(201,164,92,.35),

        0 0 52px
        rgba(57,191,255,.20);

    opacity: .65;

    z-index: 15;

    animation:
        arsIdentityCorePulse
        4.2s
        ease-in-out
        infinite;
}


/* =========================================================
   LIGHT SWEEP ACROSS LOGO
   ========================================================= */

.ars-logo-sweep {

    position: absolute;

    left: -25%;
    top: 8%;

    width: 150%;
    height: 1px;

    transform:
        rotate(-7deg);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.08) 20%,
            rgba(121,221,255,.55) 40%,
            rgba(255,255,255,.75) 50%,
            rgba(228,189,104,.55) 62%,
            transparent 82%
        );

    box-shadow:
        0 0 8px rgba(57,191,255,.25),
        0 0 18px rgba(228,189,104,.12);

    opacity: 0;

    z-index: 18;

    animation:
        arsLogoLightSweep
        6.2s
        cubic-bezier(.42,0,.24,1)
        2.6s
        infinite;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes arsIdentityReveal {

    0% {

        opacity: 0;

        transform:
            translateY(20px)
            scale(.76);
    }

    55% {

        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.035);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes arsIdentityBreath {

    0%, 100% {

        transform: scale(.985);

        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.22))
            drop-shadow(0 0 14px rgba(57,191,255,.24))
            drop-shadow(0 0 28px rgba(228,189,104,.16));
    }

    50% {

        transform: scale(1.015);

        filter:
            drop-shadow(0 0 7px rgba(255,255,255,.32))
            drop-shadow(0 0 18px rgba(57,191,255,.34))
            drop-shadow(0 0 34px rgba(228,189,104,.24));
    }
}


@keyframes arsIdentityAura {

    0%, 100% {

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

        opacity: .45;
    }

    50% {

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

        opacity: .82;
    }
}


@keyframes arsIdentityCorePulse {

    0%, 100% {

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

        opacity: .45;
    }

    50% {

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

        opacity: 1;
    }
}


@keyframes arsLogoLightSweep {

    0% {

        left: -30%;
        opacity: 0;
    }

    12% {

        opacity: .72;
    }

    52% {

        opacity: .48;
    }

    100% {

        left: 110%;
        opacity: 0;
    }
}


@keyframes arsIdentityBeamPulse {

    0%, 100% {

        opacity: .25;
        transform:
            translateX(-50%)
            scaleY(.75);
    }

    50% {

        opacity: .82;
        transform:
            translateX(-50%)
            scaleY(1.15);
    }
}


@keyframes arsEnergyStream1 {

    0%, 100% {

        opacity: 0;
        transform:
            rotate(-10deg)
            scaleX(.35);
    }

    35% {

        opacity: .58;
        transform:
            rotate(-10deg)
            scaleX(1);
    }

    70% {

        opacity: .25;
        transform:
            rotate(-10deg)
            scaleX(.72);
    }
}


@keyframes arsEnergyStream2 {

    0%, 100% {

        opacity: 0;
        transform:
            rotate(7deg)
            scaleX(.30);
    }

    40% {

        opacity: .60;
        transform:
            rotate(7deg)
            scaleX(1);
    }

    72% {

        opacity: .22;
        transform:
            rotate(7deg)
            scaleX(.70);
    }
}


@keyframes arsEnergyStream3 {

    0%, 100% {

        opacity: 0;
        transform:
            rotate(-4deg)
            scaleX(.25);
    }

    38% {

        opacity: .48;
        transform:
            rotate(-4deg)
            scaleX(1);
    }

    70% {

        opacity: .18;
        transform:
            rotate(-4deg)
            scaleX(.68);
    }
}


@keyframes arsOrbitSpin {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes arsOrbitSpinReverse {

    from {

        transform:
            translate(-50%, -50%)
            rotate(55deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(-305deg);
    }
}


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

@media (max-width: 700px) {

    .arsbrain-hero .ars-hero-identity {

        height: 145px;

        margin-top: 0;
    }

    .ars-identity-logo {

        width: 105px;
        height: 105px;
    }

    .ars-identity-orbit {

        width: 190px;
        height: 70px;
    }

    .ring-1 {

        width: 175px;
        height: 58px;
    }

    .ring-2 {

        width: 150px;
        height: 48px;
    }

    .ring-3 {

        width: 120px;
        height: 38px;
    }

    .ars-identity-energy::before {

        height: 105px;
        top: -65px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .ars-identity-logo,
    .ars-identity-logo img,
    .ars-logo-aura,
    .ars-logo-sweep,
    .ars-logo-core,
    .ars-identity-energy::before,
    .ars-energy-beam,
    .ars-orbit-ring {

        animation: none !important;
    }

    .ars-identity-logo {

        opacity: 1;
    }
   }


















/* =========================================================
   ARS BRAIN — HERO IDENTITY SYSTEM
   2X SCALE + LIGHT BOOST
   ========================================================= */

.arsbrain-hero .ars-hero-identity {
    height: 380px !important;
    margin-top: -20px !important;
}

/* MAIN LOGO — 2X */
.arsbrain-hero .ars-identity-logo {
    width: clamp(250px, 30vw, 370px) !important;
    height: clamp(250px, 30vw, 370px) !important;
}

/* AURA — 2X + BRIGHTER */
.arsbrain-hero .ars-logo-aura {
    width: 175% !important;
    height: 175% !important;
    filter: brightness(1.35) !important;
}

/* ORBIT SYSTEM — 2X */
.arsbrain-hero .ars-identity-orbit {
    width: 540px !important;
    height: 200px !important;
}

.arsbrain-hero .ars-orbit-ring {
    transform-origin: center !important;
}

/* ENERGY SYSTEM — 2X SCALE */
.arsbrain-hero .ars-identity-energy {
    transform: scale(2) !important;
}

/* MAIN VERTICAL BEAM — 2X + LIGHT */
.arsbrain-hero .ars-identity-energy::before {
    box-shadow:
        0 0 10px rgba(57,191,255,.42),
        0 0 24px rgba(57,191,255,.28),
        0 0 48px rgba(228,189,104,.24),
        0 0 90px rgba(201,164,92,.16) !important;
    filter: brightness(1.3) !important;
}

/* THREE LIGHT STREAMS — 2X + 30% BRIGHTER */
.arsbrain-hero .ars-energy-beam {
    transform: scaleX(2) !important;
    filter: brightness(1.3) !important;
    box-shadow:
        0 0 8px rgba(57,191,255,.55),
        0 0 20px rgba(57,191,255,.32),
        0 0 38px rgba(228,189,104,.22) !important;
}

/* LOGO CORE — 2X + 40% BRIGHTER */
.arsbrain-hero .ars-logo-core {
    width: 14px !important;
    height: 14px !important;
    box-shadow:
        0 0 12px rgba(255,255,255,1),
        0 0 28px rgba(255,244,207,1),
        0 0 48px rgba(228,189,104,1),
        0 0 80px rgba(201,164,92,.82),
        0 0 120px rgba(57,191,255,.38) !important;
}

/* LOGO SWEEP — 2X */
.arsbrain-hero .ars-logo-sweep {
    transform: scale(2) !important;
    filter: brightness(1.3) !important;
}

/* =========================================================
   LIGHT UNDER / AROUND THE SYSTEM — +30%
   ========================================================= */

.arsbrain-hero .ars-hero-identity::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 520px;
    height: 150px;
    transform: translateX(-50%);
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,244,207,.42) 0%,
            rgba(228,189,104,.30) 22%,
            rgba(201,164,92,.19) 42%,
            rgba(57,191,255,.12) 62%,
            transparent 82%
        );
    filter: blur(14px);
    opacity: 1 !important;
    pointer-events: none;
}

/* =========================================================
   MOBILE — KEEP THE 2X SYSTEM BUT PREVENT OVERFLOW
   ========================================================= */

@media (max-width:700px) {

    .arsbrain-hero .ars-hero-identity {
        height: 300px !important;
    }

    .arsbrain-hero .ars-identity-logo {
        width: 230px !important;
        height: 230px !important;
    }

    .arsbrain-hero .ars-identity-orbit {
        width: 420px !important;
        height: 160px !important;
    }

    .arsbrain-hero .ars-hero-identity::after {
        width: 400px;
        height: 120px;
    }
}







/* ARS BRAIN IDENTITY — 30% SMALLER THAN CURRENT 2X */

.arsbrain-hero .ars-hero-identity {
    transform: scale(.77) !important;
    transform-origin: center center !important;
}
















/* =========================================================
   ARS BRAIN — HERO VISUAL / CINEMATIC INTELLIGENCE LAYER
   ========================================================= */

.arsbrain-hero .hero-visual {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: 24px;
    transform: translateZ(0);
    box-shadow:
        0 0 0 1px rgba(228,189,104,.16),
        0 0 35px rgba(201,164,92,.12),
        0 0 70px rgba(22,169,255,.08),
        0 28px 70px rgba(0,0,0,.55);
}

/* CINEMATIC DEPTH */
.arsbrain-hero .hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 52% 58%,
            transparent 30%,
            rgba(3,7,11,.04) 52%,
            rgba(3,7,11,.24) 82%,
            rgba(1,3,5,.52) 100%
        );

    box-shadow:
        inset 0 0 45px rgba(0,0,0,.28),
        inset 0 0 100px rgba(0,0,0,.20);
}

/* GOLD / BLUE ATMOSPHERIC LIGHT */
.arsbrain-hero .hero-visual::after {
    content: "";
    position: absolute;
    inset: -15%;
    z-index: 4;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 67% 70%,
            rgba(228,189,104,.13) 0%,
            rgba(201,164,92,.07) 18%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 38% 38%,
            rgba(57,191,255,.10) 0%,
            rgba(57,191,255,.045) 22%,
            transparent 48%
        );

    mix-blend-mode: screen;
    opacity: .9;
}

/* IMAGE — CLEANER CINEMATIC PRESENCE */
.arsbrain-hero .hero-visual img {
    position: relative;
    z-index: 1;
    transform: scale(1.012) translateZ(0);
    filter:
        saturate(.90)
        contrast(1.07)
        brightness(.96)
        drop-shadow(0 20px 35px rgba(0,0,0,.32));
    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1),
        filter 1.2s ease;
}

/* SUBTLE DEPTH ON HERO IMAGE */
.arsbrain-hero .hero-visual:hover img {
    transform: scale(1.025) translate3d(0,-3px,0);
    filter:
        saturate(.96)
        contrast(1.08)
        brightness(1)
        drop-shadow(0 24px 42px rgba(0,0,0,.36));
}

/* =========================================================
   INTELLIGENCE DATA — ULTRA THIN
   ========================================================= */

.arsbrain-hero .hero-visual {
    --hero-data-gold: rgba(228,189,104,.48);
    --hero-data-blue: rgba(57,191,255,.52);
}

/* Fine horizontal intelligence axis */
.arsbrain-hero .hero-visual .ars-hero-data-line {
    position: absolute;
    z-index: 6;
    left: 7%;
    right: 7%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--hero-data-blue) 25%,
            rgba(255,244,207,.72) 50%,
            var(--hero-data-gold) 75%,
            transparent
        );
    box-shadow:
        0 0 8px rgba(57,191,255,.22),
        0 0 16px rgba(228,189,104,.12);
    opacity: .42;
    pointer-events: none;
}

/* =========================================================
   ARS BRAIN CORE LIGHT EMPHASIS
   ========================================================= */

.arsbrain-hero .hero-visual img {
    --brain-core-glow:
        0 0 30px rgba(57,191,255,.08);
}

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

@media (max-width:700px) {

    .arsbrain-hero .hero-visual {
        border-radius: 18px;
        box-shadow:
            0 0 0 1px rgba(228,189,104,.13),
            0 0 30px rgba(201,164,92,.09),
            0 20px 45px rgba(0,0,0,.48);
    }

    .arsbrain-hero .hero-visual::before {
        background:
            radial-gradient(
                ellipse at center,
                transparent 28%,
                rgba(1,3,5,.18) 78%,
                rgba(1,3,5,.42) 100%
            );
    }

    .arsbrain-hero .hero-visual img {
        transform: scale(1.005) !important;
    }
}







/* =========================================================
   ARS BRAIN — HERO IMAGE
   CONTROLLED ENLARGEMENT / NO OVERFLOW
   ========================================================= */

.arsbrain-hero .hero-visual {
    transform: none !important;
    overflow: hidden !important;
    position: relative !important;
}

/* IMAGE ONLY */
.arsbrain-hero .hero-visual img {
    width: 135% !important;
    max-width: none !important;
    height: auto !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;

    transform: translateX(-50%) !important;
    left: 50% !important;
    position: relative !important;

    filter:
        saturate(1)
        contrast(1.08)
        brightness(1.04) !important;
}

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

@media (max-width:700px) and (orientation:portrait) {

    .arsbrain-hero .hero-visual {
        overflow: hidden !important;
    }

    .arsbrain-hero .hero-visual img {
        width: 135% !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
        left: 50% !important;
    }
}

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

@media (max-width:700px) and (orientation:landscape) {

    .arsbrain-hero .hero-visual {
        overflow: hidden !important;
    }

    .arsbrain-hero .hero-visual img {
        width: 135% !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
        left: 50% !important;
    }
}












/* =========================================================
   ARS BRAIN — HERO LIVE INTELLIGENCE SYSTEM
   SENSORS → BRAIN → AI → DRIVER EXPERIENCE
   ========================================================= */

.arsbrain-hero .hero-visual {
    position: relative !important;
    isolation: isolate !important;
}

/* ---------- INTELLIGENCE CORE ---------- */

.arsbrain-hero .hero-visual::after {
    animation: arsHeroAtmosphere 6s ease-in-out infinite !important;
}

@keyframes arsHeroAtmosphere {
    0%, 100% {
        opacity: .72;
    }
    50% {
        opacity: 1;
    }
}

/* ---------- DATA STREAM LAYER ---------- */

.arsbrain-hero .hero-visual::before {
    background:
        radial-gradient(
            circle at 62% 53%,
            rgba(57,191,255,.10) 0%,
            rgba(57,191,255,.035) 16%,
            transparent 34%
        ),
        radial-gradient(
            circle at 68% 62%,
            rgba(228,189,104,.10) 0%,
            rgba(201,164,92,.035) 18%,
            transparent 38%
        ),
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(3,7,11,.06) 65%,
            rgba(1,3,5,.32) 100%
        ) !important;

    animation: arsHeroIntelligenceField 8s ease-in-out infinite !important;
}

@keyframes arsHeroIntelligenceField {
    0%, 100% {
        opacity: .72;
        filter: brightness(.95);
    }

    50% {
        opacity: 1;
        filter: brightness(1.08);
    }
}

/* ---------- SCANNING AXIS ---------- */

.arsbrain-hero .hero-visual {
    --ars-scan-blue: rgba(57,191,255,.72);
    --ars-scan-gold: rgba(228,189,104,.58);
}

.arsbrain-hero .hero-visual .ars-hero-scan {
    position: absolute;
    z-index: 8;
    left: 4%;
    right: 4%;
    top: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.08) 18%,
            var(--ars-scan-blue) 38%,
            rgba(121,221,255,.88) 50%,
            var(--ars-scan-gold) 64%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(57,191,255,.35),
        0 0 18px rgba(57,191,255,.18),
        0 0 30px rgba(228,189,104,.12);

    pointer-events: none;

    animation:
        arsHeroScan 7s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes arsHeroScan {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .65;
    }

    50% {
        opacity: .9;
    }

    90% {
        opacity: .65;
    }

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

/* ---------- DATA PACKETS ---------- */

.arsbrain-hero .hero-visual .ars-data-packet {
    position: absolute;
    z-index: 9;
    width: 4px;
    height: 4px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff4cf 0%,
            #e4bd68 28%,
            #39bfff 62%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(255,244,207,.95),
        0 0 16px rgba(57,191,255,.55),
        0 0 25px rgba(228,189,104,.28);

    pointer-events: none;
}

/* Sensor → Brain */
.arsbrain-hero .hero-visual .ars-data-packet.p1 {
    left: 16%;
    top: 72%;
    animation: arsPacket1 4.8s ease-in-out infinite;
}

@keyframes arsPacket1 {
    0%,100% {
        transform: translate(0,0);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    70% {
        transform: translate(28vw,-18vh);
        opacity: .9;
    }

    88% {
        opacity: 0;
    }
}

/* Camera → Brain */
.arsbrain-hero .hero-visual .ars-data-packet.p2 {
    left: 22%;
    top: 34%;
    animation: arsPacket2 5.6s ease-in-out infinite;
    animation-delay: 1.4s;
}

@keyframes arsPacket2 {
    0%,100% {
        transform: translate(0,0);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    68% {
        transform: translate(25vw,18vh);
        opacity: .9;
    }

    88% {
        opacity: 0;
    }
}

/* Brain → Display */
.arsbrain-hero .hero-visual .ars-data-packet.p3 {
    right: 18%;
    top: 52%;
    animation: arsPacket3 5.2s ease-in-out infinite;
    animation-delay: 2.7s;
}

@keyframes arsPacket3 {
    0%,100% {
        transform: translate(0,0);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    70% {
        transform: translate(-23vw,-10vh);
        opacity: .9;
    }

    88% {
        opacity: 0;
    }
}

/* ---------- BRAIN CORE PULSE ---------- */

.arsbrain-hero .hero-visual .ars-brain-core-pulse {
    position: absolute;
    z-index: 7;
    left: 62%;
    top: 52%;
    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: #e4bd68;

    box-shadow:
        0 0 8px rgba(255,244,207,.95),
        0 0 20px rgba(228,189,104,.72),
        0 0 38px rgba(57,191,255,.34);

    pointer-events: none;

    animation: arsBrainCorePulse 3.4s ease-in-out infinite;
}

@keyframes arsBrainCorePulse {
    0%,100% {
        transform: scale(.72);
        opacity: .65;
    }

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

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .arsbrain-hero .hero-visual *,
    .arsbrain-hero .hero-visual::before,
    .arsbrain-hero .hero-visual::after {
        animation: none !important;
    }
}














/* =========================================================
   ARS BRAIN — HERO SENSOR INTELLIGENCE NETWORK
   CLEAN VERSION
   ========================================================= */

.arsbrain-hero .hero-visual {
    position: relative !important;
    overflow: hidden !important;
}

.arsbrain-hero .ars-hero-sensor-network {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}

/* =========================
   SENSOR ROUTES
   ========================= */

.arsbrain-hero .ars-sensor-route {
    position: absolute;
    height: 1px;
    width: 34%;
    transform-origin: left center;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(57,191,255,.22),
        rgba(57,191,255,.72),
        rgba(228,189,104,.78)
    );

    box-shadow:
        0 0 5px rgba(57,191,255,.35),
        0 0 13px rgba(228,189,104,.18);

    opacity: .62;

    background-size: 180px 100%;
    animation: arsSensorDataFlow 3.8s linear infinite;
}

/* FRONT */
.arsbrain-hero .route-1 {
    left: 13%;
    top: 69%;
    transform: rotate(-15deg);
}

/* SIDE */
.arsbrain-hero .route-2 {
    left: 17%;
    top: 39%;
    transform: rotate(17deg);
    animation-delay: .9s;
}

/* REAR */
.arsbrain-hero .route-3 {
    left: 72%;
    top: 70%;
    transform: rotate(197deg);
    animation-delay: 1.7s;
}

/* CABIN */
.arsbrain-hero .route-4 {
    left: 72%;
    top: 35%;
    transform: rotate(160deg);
    animation-delay: 2.5s;
}

@keyframes arsSensorDataFlow {

    0% {
        background-position: -180px 0;
        opacity: .25;
    }

    35% {
        opacity: .72;
    }

    70% {
        opacity: .62;
    }

    100% {
        background-position: 180px 0;
        opacity: .25;
    }
}

/* =========================
   SENSOR ORBS
   ========================= */

.arsbrain-hero .ars-sensor-orb {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff4cf 0%,
            #e4bd68 28%,
            #39bfff 68%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(255,244,207,.9),
        0 0 16px rgba(57,191,255,.58),
        0 0 27px rgba(228,189,104,.30);

    animation: arsSensorOrbPulse 2.6s ease-in-out infinite;
}

/* FRONT SENSOR */
.arsbrain-hero .orb-1 {
    left: 13%;
    top: 69%;
}

/* SIDE SENSOR */
.arsbrain-hero .orb-2 {
    left: 17%;
    top: 39%;
    animation-delay: .65s;
}

/* REAR SENSOR */
.arsbrain-hero .orb-3 {
    left: 72%;
    top: 70%;
    animation-delay: 1.3s;
}

/* CABIN SENSOR */
.arsbrain-hero .orb-4 {
    left: 72%;
    top: 35%;
    animation-delay: 1.95s;
}

@keyframes arsSensorOrbPulse {

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

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

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

@media (max-width:700px) {

    .arsbrain-hero .ars-sensor-route {
        opacity: .48;
        width: 30%;
    }

    .arsbrain-hero .ars-sensor-orb {
        width: 5px;
        height: 5px;
    }
}





































/* =========================================================
   ARS BRAIN — CINEMATIC LIVING HERO
   Living Image / Depth / Light / Focus
   ========================================================= */

.arsbrain-hero .hero-visual {
    position: relative !important;
    isolation: isolate !important;
}

/* ---------- MASTER CINEMATIC ATMOSPHERE ---------- */

.arsbrain-hero .ars-hero-cinematic {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

/* ---------- SLOW LIVING LIGHT ---------- */

.arsbrain-hero .ars-hero-breath {
    position: absolute;
    inset: -15%;

    background:
        radial-gradient(
            ellipse at 58% 54%,
            rgba(228,189,104,.14) 0%,
            rgba(201,164,92,.07) 20%,
            transparent 43%
        ),
        radial-gradient(
            ellipse at 35% 38%,
            rgba(57,191,255,.10) 0%,
            rgba(57,191,255,.04) 24%,
            transparent 48%
        );

    mix-blend-mode: screen;

    animation:
        arsHeroBreathing 7s ease-in-out infinite;
}

@keyframes arsHeroBreathing {

    0%,100% {
        opacity: .42;
        transform: scale(.97);
    }

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

/* ---------- CINEMATIC LIGHT SWEEP ---------- */

.arsbrain-hero .ars-hero-light-sweep {
    position: absolute;
    top: -20%;
    left: -35%;

    width: 26%;
    height: 140%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(228,189,104,.035) 30%,
            rgba(255,244,207,.16) 50%,
            rgba(57,191,255,.045) 70%,
            transparent 100%
        );

    filter: blur(9px);

    transform: rotate(12deg);

    mix-blend-mode: screen;

    animation:
        arsHeroLightSweep 11s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes arsHeroLightSweep {

    0% {
        left: -38%;
        opacity: 0;
    }

    12% {
        opacity: .35;
    }

    48% {
        opacity: .75;
    }

    65% {
        opacity: .30;
    }

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

/* ---------- INTELLIGENT FOCUS ---------- */

.arsbrain-hero .ars-hero-focus {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 42%;
    height: 42%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(228,189,104,.08) 0%,
            rgba(57,191,255,.045) 28%,
            transparent 70%
        );

    filter: blur(18px);

    animation:
        arsHeroFocus 5s ease-in-out infinite;
}

@keyframes arsHeroFocus {

    0%,100% {
        opacity: .35;
        transform: translate(-50%,-50%) scale(.88);
    }

    50% {
        opacity: .85;
        transform: translate(-50%,-50%) scale(1.08);
    }
}

/* ---------- VERY SUBTLE IMAGE DEPTH ---------- */

.arsbrain-hero .hero-visual img {
    transition:
        transform 2s cubic-bezier(.2,.8,.2,1),
        filter 2s ease !important;
}

.arsbrain-hero .hero-visual:hover img {
    transform: scale(1.018) translateY(-2px) !important;

    filter:
        saturate(1.02)
        contrast(1.09)
        brightness(1.035)
        drop-shadow(0 24px 45px rgba(0,0,0,.35)) !important;
}

/* ---------- MOBILE ---------- */

@media(max-width:700px) {

    .arsbrain-hero .ars-hero-light-sweep {
        width: 32%;
        animation-duration: 13s;
    }

    .arsbrain-hero .ars-hero-focus {
        width: 55%;
        height: 55%;
    }
}

/* ---------- REDUCED MOTION ---------- */

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

    .arsbrain-hero .ars-hero-light-sweep,
    .arsbrain-hero .ars-hero-breath,
    .arsbrain-hero .ars-hero-focus {
        animation: none !important;
    }
}













/* =========================================================
   ARS BRAIN HERO — VISIBLE CINEMATIC LIGHT ENGINE V2
   ========================================================= */

.arsbrain-hero .hero-visual {
    position: relative !important;
    overflow: hidden !important;
}

/* ---------- POWERFUL AMBIENT LIGHT ---------- */

.arsbrain-hero .hero-visual::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 20;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 25% 35%,
            rgba(57,191,255,.24) 0%,
            rgba(57,191,255,.10) 18%,
            transparent 43%
        ),
        radial-gradient(
            ellipse at 72% 62%,
            rgba(228,189,104,.25) 0%,
            rgba(201,164,92,.12) 20%,
            transparent 46%
        );

    mix-blend-mode: screen;
    filter: blur(22px);

    animation: arsHeroAmbientPower 6s ease-in-out infinite;
}

@keyframes arsHeroAmbientPower {

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

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


/* ---------- LARGE MOVING LIGHT ---------- */

.arsbrain-hero .hero-visual::after {
    content: "";
    position: absolute;

    top: -35%;
    left: -55%;

    width: 45%;
    height: 170%;

    z-index: 25;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(201,164,92,.04) 20%,
            rgba(255,242,194,.32) 48%,
            rgba(57,191,255,.12) 58%,
            transparent 100%
        );

    filter: blur(12px);
    transform: rotate(13deg);

    mix-blend-mode: screen;

    animation: arsHeroMajorSweep 8s ease-in-out infinite;
}

@keyframes arsHeroMajorSweep {

    0% {
        left: -55%;
        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    45% {
        opacity: 1;
    }

    65% {
        opacity: .65;
    }

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


/* ---------- IMAGE DEPTH ---------- */

.arsbrain-hero .hero-visual img {
    animation:
        arsHeroImageBreath 9s ease-in-out infinite !important;

    will-change: transform, filter;
}

@keyframes arsHeroImageBreath {

    0%,100% {
        transform:
            translate3d(0,0,0)
            scale(1.002);

        filter:
            saturate(1)
            contrast(1.05)
            brightness(1);
    }

    50% {
        transform:
            translate3d(0,-2px,0)
            scale(1.008);

        filter:
            saturate(1.045)
            contrast(1.08)
            brightness(1.035);
    }
}


/* ---------- DEEP CINEMATIC VIGNETTE ---------- */

.arsbrain-hero .hero-visual {
    box-shadow:
        inset 0 0 80px rgba(0,0,0,.35),
        inset 0 0 150px rgba(0,0,0,.20);
}


/* ---------- MOBILE ---------- */

@media(max-width:700px) {

    .arsbrain-hero .hero-visual::before {
        filter: blur(16px);
    }

    .arsbrain-hero .hero-visual::after {
        width: 55%;
        filter: blur(10px);
    }
}


/* ---------- REDUCED MOTION ---------- */

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

    .arsbrain-hero .hero-visual::before,
    .arsbrain-hero .hero-visual::after,
    .arsbrain-hero .hero-visual img {
        animation: none !important;
    }
}





























/* =========================================================
   ARS BRAIN — HERO PREMIUM 2
   FOUNDATION
   ========================================================= */

.arsbrain-premium-2 {
    position: relative;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(201,164,92,.055),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020202 0%,
            #070604 48%,
            #020202 100%
        );

    color: #f5f1e8;
    isolation: isolate;
}


/* BACKGROUND */

.ars-p2-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(57,191,255,.025),
            transparent 55%
        );

    pointer-events: none;
}


/* HEADER */

.ars-p2-header {
    position: absolute;

    top: 42px;
    left: 5%;
    right: 5%;

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

    color: rgba(231,201,135,.58);

    font-size: 9px;
    letter-spacing: .28em;
}

.ars-p2-header b {
    color: #e7c987;
    font-weight: 500;
}

.ars-p2-header small {
    font-size: 8px;
}


/* STAGE */

.ars-p2-stage {
    position: relative;

    width: min(1200px, 92vw);
    height: min(700px, 72vh);

    margin: auto;

    top: 50%;
    transform: translateY(-50%);
}


/* NEURAL MAP */

.ars-p2-neural-map {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}


/* CONNECTIONS */

.ars-p2-line {
    fill: none;

    stroke-linecap: round;

    vector-effect: non-scaling-stroke;
}

.active-line {
    stroke: url(#arsP2GoldFlow);
    stroke-width: 1.4;
}

.future-line {
    stroke: url(#arsP2FutureFlow);
    stroke-width: 1;
    stroke-dasharray: 4 8;
}


/* CORE */

.ars-p2-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 230px;
    height: 230px;

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

    z-index: 5;
}


/* CORE FRAME */

.ars-p2-core-frame {
    position: absolute;
    inset: 20px;

    transform: rotate(45deg);

    border:
        1px solid rgba(228,189,104,.65);

    background:
        linear-gradient(
            145deg,
            rgba(201,164,92,.12),
            rgba(8,8,7,.88) 45%,
            rgba(57,191,255,.035)
        );

    box-shadow:
        0 0 25px rgba(228,189,104,.12),
        inset 0 0 30px rgba(201,164,92,.08);

}


/* CORE INNER */

.ars-p2-core-inner {
    position: absolute;

    inset: 16px;

    transform: rotate(-45deg);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.ars-p2-core-label {
    font-size: 7px;
    letter-spacing: .25em;

    color: rgba(231,201,135,.7);
}


.ars-p2-core-inner strong {
    margin-top: 7px;

    font-size: 29px;
    line-height: 1;

    letter-spacing: .18em;

    color: #fff2c2;
}


.ars-p2-core-inner b {
    margin-top: 3px;

    font-size: 12px;
    letter-spacing: .38em;

    color: #d0aa63;
}


.ars-p2-core-inner small {
    margin-top: 12px;

    max-width: 120px;

    font-size: 6px;
    line-height: 1.5;

    letter-spacing: .12em;

    color: rgba(217,210,198,.48);
}


/* CORE LIGHT */

.ars-p2-core-light {
    position: absolute;

    inset: -45px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(228,189,104,.18),
            rgba(57,191,255,.035) 35%,
            transparent 70%
        );

    filter: blur(15px);

    z-index: -1;
}


/* ACTIVE PRODUCTS */

.ars-p2-product {
    position: absolute;

    top: 50%;

    width: 270px;
    min-height: 76px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 16px 20px;

    border: 1px solid rgba(228,189,104,.25);

    background:
        linear-gradient(
            105deg,
            rgba(201,164,92,.08),
            rgba(10,10,9,.78)
        );

    backdrop-filter: blur(12px);

    text-decoration: none;

    transition: .4s ease;

    z-index: 6;
}


.ars-p2-product-platform {
    left: 0;
}


.ars-p2-product-haven {
    right: 0;
}


.ars-p2-product:hover {
    border-color: rgba(255,242,194,.7);

    box-shadow:
        0 0 30px rgba(228,189,104,.18);

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


/* PRODUCT NODE */

.ars-p2-node {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #fff2c2;

    box-shadow:
        0 0 8px rgba(255,242,194,.9),
        0 0 22px rgba(228,189,104,.55);
}


/* PRODUCT COPY */

.ars-p2-product-copy {
    display: flex;
    flex-direction: column;
}


.ars-p2-product-copy small {
    font-size: 6px;
    letter-spacing: .18em;

    color: rgba(231,201,135,.55);
}


.ars-p2-product-copy strong {
    margin-top: 3px;

    font-size: 12px;
    letter-spacing: .12em;

    color: #f5f1e8;
}


.ars-p2-product-copy span {
    margin-top: 3px;

    font-size: 7px;
    letter-spacing: .12em;

    color: rgba(217,210,198,.45);
}


/* FUTURE */

.ars-p2-future {
    position: absolute;

    width: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    opacity: .34;

    z-index: 4;
}


.future-01 {
    left: 15%;
    top: 3%;
}


.future-02 {
    right: 15%;
    top: 3%;
}


.future-03 {
    left: 15%;
    bottom: 3%;
}


.future-04 {
    right: 15%;
    bottom: 3%;
}


.ars-p2-future-node {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    border: 1px solid rgba(57,191,255,.45);

    box-shadow:
        0 0 15px rgba(57,191,255,.25);
}


.ars-p2-future strong {
    margin-top: 9px;

    font-size: 8px;
    letter-spacing: .18em;

    color: rgba(217,210,198,.5);
}


.ars-p2-future small {
    margin-top: 3px;

    font-size: 6px;
    letter-spacing: .22em;

    color: rgba(57,191,255,.42);
}


/* BOTTOM */

.ars-p2-bottom {
    position: absolute;

    left: 50%;
    bottom: 34px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 12px;

    white-space: nowrap;

    color: rgba(231,201,135,.38);

    font-size: 7px;
    letter-spacing: .2em;
}


.ars-p2-bottom i {
    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #c9a45c;

    opacity: .6;
}


/* MOBILE */

@media(max-width:700px) {

    .ars-p2-header {
        top: 25px;
        left: 20px;
        right: 20px;
        font-size: 7px;
    }

    .ars-p2-header small {
        display: none;
    }

    .ars-p2-stage {
        width: 100%;
        height: 620px;

        transform: translateY(-46%);
    }

    .ars-p2-core {
        width: 175px;
        height: 175px;
    }

    .ars-p2-product {
        width: 185px;
        min-height: 62px;
        padding: 11px 12px;
        gap: 10px;
    }

    .ars-p2-product-copy strong {
        font-size: 8px;
    }

    .ars-p2-product-copy span {
        font-size: 5px;
    }

    .ars-p2-product-platform {
        left: 4%;
    }

    .ars-p2-product-haven {
        right: 4%;
    }

    .ars-p2-future {
        width: 110px;
    }

    .future-01,
    .future-03 {
        left: 3%;
    }

    .future-02,
    .future-04 {
        right: 3%;
    }

    .ars-p2-bottom {
        bottom: 22px;
        font-size: 5px;
        gap: 7px;
    }
}















/* =========================================================
   ARS BRAIN — ELECTRIC BLUE INTELLIGENCE LAYER
   Brand Balance:
   Gold / Bronze = Identity
   Electric Blue = Intelligence / Data / Future
   ========================================================= */

body.brain-test-page {
    --ars-electric-blue: #39BFFF;
    --ars-electric-cyan: #79DDFF;
    --ars-blue-deep: #0B5F86;
    --ars-blue-glow: rgba(57,191,255,.42);
    --ars-blue-soft: rgba(57,191,255,.18);
}


/* =========================================================
   01 — GLOBAL INTELLIGENCE ATMOSPHERE
   ========================================================= */

body.brain-test-page .arsbrain-hero,
body.brain-test-page .what-is-arsbrain,
body.brain-test-page section {
    position: relative;
}

body.brain-test-page section::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -260px;
    top: 18%;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.12) 0%,
            rgba(57,191,255,.065) 28%,
            rgba(57,191,255,.025) 52%,
            transparent 72%
        );

    filter: blur(18px);
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}


/* =========================================================
   02 — HERO: BLUE ENTERS AS INTELLIGENCE
   ========================================================= */

body.brain-test-page .arsbrain-hero::before {
    background:
        radial-gradient(
            ellipse at 78% 45%,
            rgba(57,191,255,.16) 0%,
            rgba(57,191,255,.075) 24%,
            rgba(57,191,255,.025) 48%,
            transparent 72%
        ),
        radial-gradient(
            ellipse at 20% 70%,
            rgba(201,164,92,.12) 0%,
            transparent 60%
        ) !important;

    opacity: .95;
    pointer-events: none;
}

body.brain-test-page .arsbrain-hero::after {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.025) 48%,
            rgba(57,191,255,.10) 76%,
            transparent 100%
        ) !important;

    opacity: .8;
    pointer-events: none;
}


/* =========================================================
   03 — HERO IMAGE: SUBTLE BLUE REFLECTION
   ========================================================= */

body.brain-test-page .arsbrain-hero .hero-visual {
    position: relative;
}

body.brain-test-page .arsbrain-hero .hero-visual::after {
    content: "";
    position: absolute;
    inset: 4% 3% 4% 3%;

    background:
        radial-gradient(
            ellipse at 82% 52%,
            rgba(57,191,255,.16) 0%,
            rgba(57,191,255,.07) 25%,
            transparent 62%
        );

    filter: blur(20px);
    mix-blend-mode: screen;
    opacity: .65;
    pointer-events: none;
    z-index: 2;
}


/* =========================================================
   04 — GLASS / CARDS
   ========================================================= */

body.brain-test-page .ars-glass {
    border-color:
        rgba(235,198,120,.32) !important;

    box-shadow:
        0 0 0 1px rgba(57,191,255,.025),
        0 18px 50px rgba(0,0,0,.52),
        0 0 32px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(255,242,194,.20),
        inset -1px 0 0 rgba(57,191,255,.075) !important;
}


/* =========================================================
   05 — BLUE EDGE / INTELLIGENCE ACCENT
   ========================================================= */

body.brain-test-page .ars-glass::before {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(201,164,92,.20) 28%,
            rgba(235,198,120,.65) 46%,
            rgba(57,191,255,.75) 72%,
            rgba(57,191,255,.18) 88%,
            transparent 100%
        ) !important;

    opacity: .72;
}


/* =========================================================
   06 — SECTION LABELS
   ========================================================= */

body.brain-test-page .section-label {
    text-shadow:
        0 0 8px rgba(228,189,104,.30),
        0 0 18px rgba(57,191,255,.20) !important;
}


/* =========================================================
   07 — HEADINGS: BLUE MICRO-HIGHLIGHT
   ========================================================= */

body.brain-test-page h2 {
    text-shadow:
        0 0 22px rgba(57,191,255,.055),
        0 0 30px rgba(201,164,92,.06);
}


/* =========================================================
   08 — ARCHITECTURE / TECHNICAL AREAS
   ========================================================= */

body.brain-test-page .architecture-image,
body.brain-test-page .platform-visual,
body.brain-test-page .future-right {
    filter:
        drop-shadow(0 0 18px rgba(57,191,255,.10))
        drop-shadow(0 0 32px rgba(201,164,92,.08));
}


/* =========================================================
   09 — BLUE DATA-LIKE LIGHT UNDER TECHNICAL CARDS
   ========================================================= */

body.brain-test-page .architecture-card,
body.brain-test-page .platform-card,
body.brain-test-page .future-card {
    position: relative;
}

body.brain-test-page .architecture-card::after,
body.brain-test-page .platform-card::after,
body.brain-test-page .future-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -8px;
    height: 18px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(57,191,255,.18) 0%,
            rgba(57,191,255,.07) 34%,
            transparent 76%
        );

    filter: blur(7px);
    opacity: .7;
    pointer-events: none;
}


/* =========================================================
   10 — ICONS: BLUE + GOLD MIX
   ========================================================= */

body.brain-test-page .ars-icon,
body.brain-test-page .card-icon,
body.brain-test-page .ars-card-icon {
    filter:
        drop-shadow(0 0 6px rgba(228,189,104,.45))
        drop-shadow(0 0 14px rgba(57,191,255,.28)) !important;
}


/* =========================================================
   11 — BUTTON INTELLIGENCE ACCENT
   ========================================================= */

body.brain-test-page .btn-secondary {
    border-color:
        rgba(57,191,255,.42) !important;

    box-shadow:
        0 0 12px rgba(57,191,255,.08),
        inset 0 0 14px rgba(57,191,255,.035);
}

body.brain-test-page .btn-secondary:hover {
    border-color:
        rgba(121,221,255,.72) !important;

    box-shadow:
        0 0 18px rgba(57,191,255,.22),
        0 0 36px rgba(57,191,255,.10),
        inset 0 0 18px rgba(57,191,255,.06);
}


/* =========================================================
   12 — GOLD REMAINS DOMINANT
   ========================================================= */

body.brain-test-page .ars-gold,
body.brain-test-page .gold,
body.brain-test-page h3 {
    text-shadow:
        0 0 8px rgba(255,224,154,.20),
        0 0 20px rgba(201,164,92,.10);
}


/* =========================================================
   13 — BLUE MOTION FOR INTELLIGENCE ELEMENTS
   ========================================================= */

@keyframes arsBrainBluePulse {

    0%, 100% {
        opacity: .35;
        filter:
            drop-shadow(0 0 5px rgba(57,191,255,.20))
            drop-shadow(0 0 14px rgba(57,191,255,.08));
    }

    50% {
        opacity: .85;
        filter:
            drop-shadow(0 0 8px rgba(57,191,255,.42))
            drop-shadow(0 0 22px rgba(57,191,255,.18));
    }
}

body.brain-test-page .ars-blue-intelligence,
body.brain-test-page .ars-data-flow,
body.brain-test-page .ars-scan-line {
    animation:
        arsBrainBluePulse 4.5s ease-in-out infinite;
}


/* =========================================================
   14 — BLUE PRESENCE — CONTROLLED
   ========================================================= */

body.brain-test-page .arsbrain-hero,
body.brain-test-page .what-is-arsbrain,
body.brain-test-page .architecture-section,
body.brain-test-page .platform-section,
body.brain-test-page .future-section {
    --blue-presence: .22;
}


/* =========================================================
   15 — REDUCE BLUE ON MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.brain-test-page section::after {
        width: 360px;
        height: 360px;
        right: -210px;
        opacity: .55;
    }

    body.brain-test-page .arsbrain-hero::before {
        opacity: .72;
    }

    body.brain-test-page .arsbrain-hero .hero-visual::after {
        opacity: .42;
    }
}


/* =========================================================
   16 — ACCESSIBILITY
   ========================================================= */

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

    body.brain-test-page .ars-blue-intelligence,
    body.brain-test-page .ars-data-flow,
    body.brain-test-page .ars-scan-line {
        animation: none !important;
    }
}





























/* =====================================================
   ARS BRAIN PREMIUM 2
   FINAL COMPOSITION / GEOMETRY FIX
   ===================================================== */

.arsbrain-premium-2 {
    position: relative !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
}

/* ---------- STAGE ---------- */

.arsbrain-premium-2 .ars-p2-stage {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: min(1120px, 94vw) !important;
    height: min(600px, 68svh) !important;

    margin: 0 !important;

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

    overflow: visible !important;
}


/* ---------- NEURAL MAP ---------- */

.arsbrain-premium-2 .ars-p2-neural-map {
    position: absolute !important;

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

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    pointer-events: none !important;
    overflow: visible !important;
}


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

.arsbrain-premium-2 .ars-p2-core {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 220px !important;
    height: 220px !important;

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

    z-index: 20 !important;
}

.arsbrain-premium-2 .ars-p2-core-frame {
    z-index: 2 !important;
}

.arsbrain-premium-2 .ars-p2-core-light {
    z-index: 1 !important;
}


/* ---------- ACTIVE PRODUCTS ---------- */

.arsbrain-premium-2 .ars-p2-product {
    position: absolute !important;

    top: 50% !important;

    width: 245px !important;
    min-height: 82px !important;

    transform: translateY(-50%) !important;

    z-index: 15 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.arsbrain-premium-2 .ars-p2-product-platform {
    left: 0 !important;
    right: auto !important;
}

.arsbrain-premium-2 .ars-p2-product-haven {
    right: 0 !important;
    left: auto !important;
}


/* ---------- FUTURE SYSTEMS ---------- */

.arsbrain-premium-2 .ars-p2-future {
    position: absolute !important;

    width: 175px !important;
    min-height: 68px !important;

    z-index: 12 !important;

    visibility: visible !important;

    /* faded, but clearly visible */
    opacity: .62 !important;

    border-color: rgba(57,191,255,.30) !important;

    background:
        linear-gradient(
            135deg,
            rgba(16,25,34,.62),
            rgba(8,13,19,.42)
        ) !important;

    box-shadow:
        0 0 14px rgba(57,191,255,.08),
        inset 0 0 20px rgba(57,191,255,.035) !important;
}


/* ---------- FUTURE POSITIONS ---------- */

/* TOP LEFT */
.arsbrain-premium-2 .future-01 {
    left: 8% !important;
    top: 0 !important;

    right: auto !important;
    bottom: auto !important;
}

/* TOP RIGHT */
.arsbrain-premium-2 .future-02 {
    right: 8% !important;
    top: 0 !important;

    left: auto !important;
    bottom: auto !important;
}

/* BOTTOM LEFT */
.arsbrain-premium-2 .future-03 {
    left: 8% !important;
    bottom: 0 !important;

    right: auto !important;
    top: auto !important;
}

/* BOTTOM RIGHT */
.arsbrain-premium-2 .future-04 {
    right: 8% !important;
    bottom: 0 !important;

    left: auto !important;
    top: auto !important;
}


/* ---------- FUTURE NODE ---------- */

.arsbrain-premium-2 .ars-p2-future-node {
    opacity: .72 !important;

    box-shadow:
        0 0 6px rgba(57,191,255,.30),
        0 0 16px rgba(57,191,255,.16) !important;
}


/* ---------- FUTURE TEXT ---------- */

.arsbrain-premium-2 .ars-p2-future strong {
    opacity: .82 !important;
}

.arsbrain-premium-2 .ars-p2-future small {
    opacity: .68 !important;
}


/* =====================================================
   LANDSCAPE MOBILE / SMALL SCREENS
   ===================================================== */

@media (max-width: 700px) {

    .arsbrain-premium-2 {
        height: 100svh !important;
        min-height: 100svh !important;
    }

    .arsbrain-premium-2 .ars-p2-stage {
        width: 94vw !important;
        height: 76svh !important;

        left: 50% !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;
    }

    .arsbrain-premium-2 .ars-p2-core {
        width: 145px !important;
        height: 145px !important;
    }

    .arsbrain-premium-2 .ars-p2-product {
        width: 30vw !important;
        min-width: 118px !important;
        max-width: 175px !important;
        min-height: 62px !important;
    }

    .arsbrain-premium-2 .ars-p2-future {
        width: 24vw !important;
        min-width: 100px !important;
        max-width: 140px !important;
        min-height: 54px !important;

        opacity: .58 !important;
    }

    .arsbrain-premium-2 .future-01,
    .arsbrain-premium-2 .future-03 {
        left: 2% !important;
    }

    .arsbrain-premium-2 .future-02,
    .arsbrain-premium-2 .future-04 {
        right: 2% !important;
    }
}


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

@media (max-width: 900px) and (orientation: landscape) {

    .arsbrain-premium-2 .ars-p2-stage {
        width: 92vw !important;
        height: 82svh !important;

        top: 50% !important;
    }

    .arsbrain-premium-2 .ars-p2-core {
        width: 145px !important;
        height: 145px !important;
    }

    .arsbrain-premium-2 .ars-p2-product {
        width: 190px !important;
        min-height: 58px !important;
    }

    .arsbrain-premium-2 .ars-p2-future {
        width: 145px !important;
        min-height: 52px !important;

        opacity: .60 !important;
    }

    .arsbrain-premium-2 .future-01,
    .arsbrain-premium-2 .future-03 {
        left: 3% !important;
    }

    .arsbrain-premium-2 .future-02,
    .arsbrain-premium-2 .future-04 {
        right: 3% !important;
    }
}



















/* =========================================================
   ARS BRAIN — FUTURE SYSTEM VISIBILITY + ELECTRIC BLUE
   NO GEOMETRY CHANGE
   ========================================================= */


/* =========================================================
   01 — FOUR FUTURE SYSTEMS
   واضح‌تر، ولی همچنان FUTURE / FADED
   ========================================================= */

.arsbrain-premium-2 .ars-p2-future {
    opacity: .78 !important;
    visibility: visible !important;

    border: 1px solid rgba(57,191,255,.38) !important;

    background:
        linear-gradient(
            135deg,
            rgba(18,30,40,.72) 0%,
            rgba(9,16,23,.58) 55%,
            rgba(8,13,18,.44) 100%
        ) !important;

    box-shadow:
        0 0 12px rgba(57,191,255,.10),
        0 0 28px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(121,221,255,.16),
        inset 0 0 22px rgba(57,191,255,.035) !important;

    filter: none !important;
}

.arsbrain-premium-2 .ars-p2-future strong {
    color: rgba(210,225,232,.88) !important;
    opacity: 1 !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.16) !important;
}

.arsbrain-premium-2 .ars-p2-future small {
    color: rgba(121,221,255,.72) !important;
    opacity: 1 !important;

    letter-spacing: .18em !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.18) !important;
}

.arsbrain-premium-2 .ars-p2-future-node {
    opacity: .95 !important;

    background:
        radial-gradient(
            circle,
            #79DDFF 0%,
            #39BFFF 28%,
            rgba(57,191,255,.35) 62%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(121,221,255,.75),
        0 0 16px rgba(57,191,255,.42),
        0 0 30px rgba(57,191,255,.18) !important;
}


/* =========================================================
   02 — FUTURE CARD SUBTLE BREATHING
   ========================================================= */

@keyframes arsP2FutureBreath {

    0%, 100% {
        opacity: .64;
        box-shadow:
            0 0 10px rgba(57,191,255,.07),
            0 0 24px rgba(57,191,255,.035),
            inset 0 0 18px rgba(57,191,255,.025);
    }

    50% {
        opacity: .86;
        box-shadow:
            0 0 15px rgba(57,191,255,.14),
            0 0 32px rgba(57,191,255,.07),
            inset 0 0 24px rgba(57,191,255,.045);
    }
}

.arsbrain-premium-2 .ars-p2-future {
    animation: arsP2FutureBreath 5s ease-in-out infinite !important;
}


/* =========================================================
   03 — ARS BRAIN HERO — ELECTRIC BLUE ATMOSPHERE
   ========================================================= */

body.brain-test-page .arsbrain-hero {
    position: relative;
    isolation: isolate;
}

body.brain-test-page .arsbrain-hero::before {
    content: "";
    position: absolute;

    width: 620px;
    height: 620px;

    right: -170px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.16) 0%,
            rgba(57,191,255,.09) 22%,
            rgba(57,191,255,.035) 48%,
            transparent 72%
        );

    filter: blur(22px);

    opacity: .95;

    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   04 — BLUE ENERGY EDGE ON HERO IMAGE
   ========================================================= */

body.brain-test-page .arsbrain-hero .hero-visual {
    position: relative;
}

body.brain-test-page .arsbrain-hero .hero-visual::after {
    content: "";

    position: absolute;
    right: 0;
    top: 10%;
    width: 2px;
    height: 80%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(57,191,255,.15),
            rgba(121,221,255,.65),
            rgba(57,191,255,.18),
            transparent
        );

    box-shadow:
        0 0 10px rgba(57,191,255,.30),
        0 0 25px rgba(57,191,255,.14);

    opacity: .75;

    pointer-events: none;
    z-index: 4;
}


/* =========================================================
   05 — ALL EXISTING GLASS CARDS
   BLUE MICRO-ACCENT
   ========================================================= */

body.brain-test-page .ars-glass {
    box-shadow:
        0 18px 50px rgba(0,0,0,.52),
        0 0 24px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(255,242,194,.18),
        inset -1px 0 0 rgba(57,191,255,.10) !important;
}


/* =========================================================
   06 — GOLD + BLUE CARD TOP LINE
   ========================================================= */

body.brain-test-page .ars-glass::before {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(201,164,92,.18) 18%,
            rgba(228,189,104,.70) 40%,
            rgba(255,242,194,.82) 52%,
            rgba(57,191,255,.62) 72%,
            rgba(57,191,255,.16) 88%,
            transparent 100%
        ) !important;

    opacity: .78 !important;
}


/* =========================================================
   07 — TECHNICAL IMAGES
   BLUE INTELLIGENCE REFLECTION
   ========================================================= */

body.brain-test-page .architecture-image,
body.brain-test-page .platform-visual,
body.brain-test-page .future-right,
body.brain-test-page .rose-image,
body.brain-test-page .zhr-image,
body.brain-test-page .os-image {
    filter:
        drop-shadow(0 0 14px rgba(57,191,255,.09))
        drop-shadow(0 0 28px rgba(57,191,255,.045))
        drop-shadow(0 0 20px rgba(201,164,92,.07)) !important;
}


/* =========================================================
   08 — BLUE ACCENT FOR LINKS / SECONDARY INTERACTION
   ========================================================= */

body.brain-test-page a:hover {
    text-shadow:
        0 0 8px rgba(57,191,255,.18);
}


/* =========================================================
   09 — BLUE SYSTEM SIGNAL
   ========================================================= */

@keyframes arsBrainElectricSignal {

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

    50% {
        opacity: .82;
    }
}

body.brain-test-page .section-label::after {
    background:
        linear-gradient(
            90deg,
            #D0AA63,
            #FFF2C2,
            #39BFFF
        ) !important;

    box-shadow:
        0 0 8px rgba(57,191,255,.24),
        0 0 16px rgba(201,164,92,.16);

    animation:
        arsBrainElectricSignal 4s ease-in-out infinite;
}


/* =========================================================
   10 — BLUE PRESENCE IN HERO TEXT AREA
   ========================================================= */

body.brain-test-page .arsbrain-content::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -22px;

    width: 170px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(201,164,92,.75),
            rgba(57,191,255,.65),
            transparent
        );

    box-shadow:
        0 0 9px rgba(57,191,255,.22);

    opacity: .72;

    pointer-events: none;
}


/* =========================================================
   11 — BLUE / GOLD BUTTON BALANCE
   ========================================================= */

body.brain-test-page .btn-primary:hover {
    box-shadow:
        0 0 18px rgba(228,189,104,.22),
        0 0 30px rgba(57,191,255,.10);
}

body.brain-test-page .btn-secondary {
    border-color:
        rgba(57,191,255,.40) !important;

    box-shadow:
        0 0 14px rgba(57,191,255,.08),
        inset 0 0 16px rgba(57,191,255,.025);
}


/* =========================================================
   12 — MOBILE
   ========================================================= */

@media (max-width:700px) {

    .arsbrain-premium-2 .ars-p2-future {
        opacity: .70 !important;
    }

    body.brain-test-page .arsbrain-hero::before {
        opacity: .65;
        width: 420px;
        height: 420px;
    }

    body.brain-test-page .arsbrain-hero .hero-visual::after {
        opacity: .45;
    }
}












/* =========================================================
   ARS BRAIN PREMIUM 2
   LIVING 3D / GLASS / LIGHT / ENERGY SYSTEM
   GEOMETRY PRESERVED
   ========================================================= */


/* =========================================================
   01 — 3D WORLD
   ========================================================= */

.arsbrain-premium-2 {
    perspective: 1400px;
    perspective-origin: 50% 50%;
}

.arsbrain-premium-2 .ars-p2-stage {
    transform-style: preserve-3d !important;
}

.arsbrain-premium-2 .ars-p2-neural-map {
    transform: translateZ(-35px);
}


/* =========================================================
   02 — GLASS MATERIAL
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product,
.arsbrain-premium-2 .ars-p2-future {

    transform-style: preserve-3d;

    backdrop-filter:
        blur(18px)
        saturate(145%)
        brightness(1.04);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(145%)
        brightness(1.04);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075) 0%,
            rgba(30,38,44,.52) 28%,
            rgba(8,13,18,.70) 68%,
            rgba(57,191,255,.045) 100%
        ) !important;

    border: 1px solid
        rgba(201,164,92,.36) !important;

    box-shadow:
        0 10px 22px rgba(0,0,0,.45),
        0 20px 50px rgba(0,0,0,.30),
        0 0 22px rgba(57,191,255,.08),
        inset 0 1px 0 rgba(255,242,194,.20),
        inset 0 -1px 0 rgba(57,191,255,.08),
        inset 0 0 24px rgba(255,255,255,.025);

    overflow: visible !important;
}


/* =========================================================
   03 — 3D EDGE / THICKNESS
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product::after,
.arsbrain-premium-2 .ars-p2-future::after {

    content: "";

    position: absolute;
    inset: 3px;

    border-radius: inherit;

    border: 1px solid
        rgba(121,221,255,.10);

    transform:
        translateZ(-8px)
        scale(.985);

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.08),
            transparent 45%,
            rgba(201,164,92,.06)
        );

    box-shadow:
        0 12px 24px rgba(0,0,0,.42);

    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   04 — ACTIVE PRODUCTS
   GOLD + ELECTRIC BLUE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product {

    border-color:
        rgba(228,189,104,.48) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.48),
        0 0 18px rgba(228,189,104,.14),
        0 0 38px rgba(57,191,255,.10),
        inset 0 1px 0 rgba(255,242,194,.28),
        inset 0 -1px 0 rgba(57,191,255,.14),
        inset 0 0 30px rgba(57,191,255,.035);

    animation:
        arsP2ActiveBreath 5.5s ease-in-out infinite;
}


/* =========================================================
   05 — ACTIVE CARD TOP ENERGY LINE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product::before {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: -1px;

    height: 2px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,164,92,.65),
            rgba(255,242,194,1),
            rgba(57,191,255,.85),
            transparent
        );

    box-shadow:
        0 0 7px rgba(255,224,154,.65),
        0 0 16px rgba(57,191,255,.28),
        0 0 30px rgba(57,191,255,.10);

    animation:
        arsP2EnergyLine 3.8s ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   06 — FUTURE CARDS
   ========================================================= */

.arsbrain-premium-2 .ars-p2-future {

    border-color:
        rgba(57,191,255,.38) !important;

    background:
        linear-gradient(
            135deg,
            rgba(18,32,42,.68),
            rgba(7,13,19,.62),
            rgba(57,191,255,.055)
        ) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.48),
        0 0 15px rgba(57,191,255,.10),
        0 0 32px rgba(57,191,255,.045),
        inset 0 1px 0 rgba(121,221,255,.17),
        inset 0 0 25px rgba(57,191,255,.035);

    animation:
        arsP2FutureLiving 6.5s ease-in-out infinite;
}


/* Different breathing phase for each future node */

.arsbrain-premium-2 .future-01 {
    animation-delay: -.8s !important;
}

.arsbrain-premium-2 .future-02 {
    animation-delay: -2.4s !important;
}

.arsbrain-premium-2 .future-03 {
    animation-delay: -4.1s !important;
}

.arsbrain-premium-2 .future-04 {
    animation-delay: -5.3s !important;
}


/* =========================================================
   07 — FUTURE NODE BLUE CORE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-future-node {

    position: relative;

    background:
        radial-gradient(
            circle,
            #D9F8FF 0%,
            #79DDFF 18%,
            #39BFFF 42%,
            rgba(57,191,255,.25) 68%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(121,221,255,.82),
        0 0 17px rgba(57,191,255,.48),
        0 0 34px rgba(57,191,255,.20) !important;

    animation:
        arsP2NodePulse 3.8s ease-in-out infinite;
}


/* =========================================================
   08 — PRODUCT NODE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-node {

    background:
        radial-gradient(
            circle,
            #FFF8DF 0%,
            #E7C987 25%,
            #D0AA63 48%,
            rgba(57,191,255,.42) 70%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(255,242,194,.9),
        0 0 17px rgba(228,189,104,.52),
        0 0 30px rgba(57,191,255,.20) !important;

    animation:
        arsP2ActiveNodePulse 3.4s ease-in-out infinite;
}


/* =========================================================
   09 — TEXT DEPTH
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product-copy,
.arsbrain-premium-2 .ars-p2-future strong,
.arsbrain-premium-2 .ars-p2-future small {

    transform: translateZ(18px);
}

.arsbrain-premium-2 .ars-p2-product-copy strong {

    text-shadow:
        0 0 8px rgba(255,242,194,.18),
        0 0 18px rgba(201,164,92,.10),
        0 0 24px rgba(57,191,255,.08);
}


/* =========================================================
   10 — NEURAL ENERGY PATHS
   ========================================================= */

.arsbrain-premium-2 .ars-p2-line {

    fill: none;

    stroke-linecap: round;

    transform-origin: center;

    filter:
        drop-shadow(0 0 5px rgba(228,189,104,.35))
        drop-shadow(0 0 14px rgba(57,191,255,.10));
}

.arsbrain-premium-2 .ars-p2-line.active-line {

    stroke:
        url(#arsP2GoldFlow) !important;

    stroke-width: 1.25;

    opacity: .78;

    stroke-dasharray: 10 90;

    animation:
        arsP2NeuralGoldFlow 4.5s linear infinite;
}

.arsbrain-premium-2 .ars-p2-line.future-line {

    stroke:
        url(#arsP2FutureFlow) !important;

    stroke-width: .8;

    opacity: .48;

    stroke-dasharray: 5 95;

    animation:
        arsP2NeuralBlueFlow 7s linear infinite;
}


/* =========================================================
   11 — CORE: PREMIUM 3D PROCESSOR
   ========================================================= */

.arsbrain-premium-2 .ars-p2-core {

    transform-style: preserve-3d !important;

    filter:
        drop-shadow(0 0 12px rgba(201,164,92,.20))
        drop-shadow(0 0 26px rgba(57,191,255,.12));
}


/* Outer diamond */
.arsbrain-premium-2 .ars-p2-core-frame {

    transform:
        rotate(45deg)
        translateZ(10px) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,242,194,.12),
            rgba(25,20,15,.86) 35%,
            rgba(7,12,17,.92) 68%,
            rgba(57,191,255,.10)
        ) !important;

    border:
        1px solid rgba(228,189,104,.72) !important;

    box-shadow:
        0 0 12px rgba(228,189,104,.28),
        0 0 28px rgba(201,164,92,.18),
        0 0 48px rgba(57,191,255,.12),
        inset 0 0 28px rgba(57,191,255,.055);
}


/* =========================================================
   12 — CORE LIGHT / ENERGY FIELD
   ========================================================= */

.arsbrain-premium-2 .ars-p2-core-light {

    width: 150%;
    height: 150%;

    left: -25%;
    top: -25%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,242,194,.22) 0%,
            rgba(228,189,104,.14) 20%,
            rgba(57,191,255,.11) 42%,
            rgba(57,191,255,.045) 60%,
            transparent 74%
        );

    filter: blur(15px);

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

    pointer-events: none;
}


/* =========================================================
   13 — CORE INNER POWER
   ========================================================= */

.arsbrain-premium-2 .ars-p2-core-inner {

    transform:
        translateZ(28px);

    text-shadow:
        0 0 8px rgba(255,242,194,.20),
        0 0 18px rgba(57,191,255,.12);
}

.arsbrain-premium-2 .ars-p2-core-inner strong {

    text-shadow:
        0 0 8px rgba(255,242,194,.45),
        0 0 20px rgba(228,189,104,.30),
        0 0 34px rgba(57,191,255,.18);
}


/* =========================================================
   14 — CORE SPECIAL ANIMATION
   Charge → Pulse → Release → Reset
   ========================================================= */

@keyframes arsP2CoreBehavior {

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

    18% {
        transform:
            translate(-50%, -50%)
            scale(1.025)
            rotate(0deg);
    }

    35% {
        transform:
            translate(-50%, -50%)
            scale(1.055)
            rotate(1.5deg);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.085)
            rotate(-1.5deg);
    }

    64% {
        transform:
            translate(-50%, -50%)
            scale(1.025)
            rotate(.7deg);
    }

    82% {
        transform:
            translate(-50%, -50%)
            scale(1.012)
            rotate(0deg);
    }
}

.arsbrain-premium-2 .ars-p2-core {
    animation:
        arsP2CoreBehavior 7s cubic-bezier(.45,.05,.25,1) infinite !important;
}


/* =========================================================
   15 — CORE FRAME MICRO ROTATION
   ========================================================= */

@keyframes arsP2CoreFrameMotion {

    0%, 100% {
        rotate: 0deg;
    }

    50% {
        rotate: 2deg;
    }
}

.arsbrain-premium-2 .ars-p2-core-frame {
    animation:
        arsP2CoreFrameMotion 7s ease-in-out infinite;
}


/* =========================================================
   16 — CORE AURA
   ========================================================= */

@keyframes arsP2CoreAura {

    0%, 100% {
        opacity: .42;
        transform: scale(.88);
    }

    38% {
        opacity: .68;
        transform: scale(.98);
    }

    50% {
        opacity: .92;
        transform: scale(1.08);
    }

    70% {
        opacity: .55;
        transform: scale(.96);
    }
}


/* =========================================================
   17 — ACTIVE CARD BREATH
   ========================================================= */

@keyframes arsP2ActiveBreath {

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

    50% {
        transform:
            translateY(-50%)
            translateZ(8px)
            scale(1.018);
    }
}


/* =========================================================
   18 — FUTURE CARD BREATH
   ========================================================= */

@keyframes arsP2FutureLiving {

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

    50% {
        transform:
            translateZ(7px)
            scale(1.015);
        opacity: .82;
    }
}


/* =========================================================
   19 — NODE PULSES
   ========================================================= */

@keyframes arsP2NodePulse {

    0%, 100% {
        transform: scale(.88);
        opacity: .62;
    }

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

@keyframes arsP2ActiveNodePulse {

    0%, 100% {
        transform: scale(.88);
        opacity: .72;
    }

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


/* =========================================================
   20 — ENERGY LINE MOTION
   ========================================================= */

@keyframes arsP2EnergyLine {

    0%, 100% {
        opacity: .38;
        transform: scaleX(.72);
    }

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

@keyframes arsP2NeuralGoldFlow {

    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes arsP2NeuralBlueFlow {

    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}


/* =========================================================
   21 — HOVER: DEPTH RESPONSE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product:hover {

    transform:
        translateY(-50%)
        translateZ(18px)
        scale(1.025) !important;

    border-color:
        rgba(255,242,194,.72) !important;

    box-shadow:
        0 18px 35px rgba(0,0,0,.52),
        0 0 22px rgba(228,189,104,.24),
        0 0 44px rgba(57,191,255,.14),
        inset 0 1px 0 rgba(255,242,194,.36),
        inset 0 0 28px rgba(57,191,255,.06) !important;
}

.arsbrain-premium-2 .ars-p2-future:hover {

    transform:
        translateZ(15px)
        scale(1.025) !important;

    opacity: .94 !important;

    border-color:
        rgba(121,221,255,.62) !important;

    box-shadow:
        0 16px 32px rgba(0,0,0,.50),
        0 0 22px rgba(57,191,255,.20),
        0 0 42px rgba(57,191,255,.10),
        inset 0 0 26px rgba(57,191,255,.06) !important;
}


/* =========================================================
   22 — REDUCED MOTION
   ========================================================= */

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

    .arsbrain-premium-2 *,
    .arsbrain-premium-2 *::before,
    .arsbrain-premium-2 *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
    }
}
















/* Rotate the diamond 45° */
.arsbrain-premium-2 .ars-p2-core-frame {
    transform: rotate(45deg) !important;
}

/* Keep the ARS BRAIN text perfectly straight */
.arsbrain-premium-2 .ars-p2-core-inner {
    transform: rotate(-45deg) !important;
}




/* ONLY — +15% CENTRAL DIAMOND */

.arsbrain-premium-2 .ars-p2-core-frame {
    transform: rotate(45deg) translateZ(10px) scale(1.15) !important;
}





/* ONLY — ARS BRAIN PLATFORM + ARS HAVEN
   HEIGHT -15% */

.arsbrain-premium-2 .ars-p2-product-platform,
.arsbrain-premium-2 .ars-p2-product-haven {
    min-height: 68.3px !important;
    height: 68.3px !important;
   }





/* =========================================================
   ARS BRAIN PREMIUM 2
   ACTIVE PRODUCTS — SLOW LIGHT BREATHING
   ONLY LIGHT / NO GEOMETRY CHANGE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product-platform,
.arsbrain-premium-2 .ars-p2-product-haven {
    animation: arsP2SlowLightBreath 5s ease-in-out infinite !important;
}

@keyframes arsP2SlowLightBreath {
    0%, 100% {
        filter: brightness(.94);
        box-shadow:
            0 12px 28px rgba(0,0,0,.48),
            0 0 18px rgba(228,189,104,.16),
            0 0 38px rgba(57,191,255,.08),
            inset 0 1px 0 rgba(255,242,194,.24),
            inset 0 0 28px rgba(57,191,255,.035);
    }

    50% {
        filter: brightness(1.10);
        box-shadow:
            0 12px 28px rgba(0,0,0,.45),
            0 0 23px rgba(255,242,194,.30),
            0 0 48px rgba(228,189,104,.22),
            0 0 65px rgba(57,191,255,.11),
            inset 0 1px 0 rgba(255,242,194,.34),
            inset 0 0 32px rgba(228,189,104,.07);
    }
}




























/* =========================================================
   ARS BRAIN PREMIUM 2
   PLATFORM — KEEP ALL TEXT INSIDE CARD
   NO CARD GEOMETRY CHANGE
   ========================================================= */

.arsbrain-premium-2 .ars-p2-product-platform {
    overflow: hidden !important;
}

.arsbrain-premium-2 .ars-p2-product-platform .ars-p2-product-copy {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.arsbrain-premium-2 .ars-p2-product-platform .ars-p2-product-copy small,
.arsbrain-premium-2 .ars-p2-product-platform .ars-p2-product-copy strong,
.arsbrain-premium-2 .ars-p2-product-platform .ars-p2-product-copy span {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}












/* =========================================================
   FUTURE ENERGY — 75% ELECTRIC BLUE / 25% GOLD
   ONLY 4 FUTURE LINES
   ========================================================= */

.arsbrain-premium-2 .ars-p2-line.future-line {
    stroke: url(#arsP2FutureElectricRay) !important;
    stroke-width: 1.7px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;

    opacity: 1 !important;

    filter:
        drop-shadow(0 0 3px rgba(121,221,255,.95))
        drop-shadow(0 0 8px rgba(57,191,255,.85))
        drop-shadow(0 0 16px rgba(57,191,255,.55))
        drop-shadow(0 0 28px rgba(228,189,104,.28)) !important;
}







 /* =========================================================
    ARS BRAIN PREMIUM 2 — FUTURE ENERGY EXTENSION
    EXTEND EACH FUTURE CHANNEL ~1cm
    ========================================================= */

.arsbrain-premium-2 .ars-p2-neural-map .future-line {
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
}

/* Push the visible energy toward each COMING SOON card */
.arsbrain-premium-2 .ars-p2-neural-map {
    overflow: visible !important;
}

/* Slight optical extension at the end of each channel */
.arsbrain-premium-2 .future-line {
    filter:
        drop-shadow(0 0 3px rgba(121,221,255,.95))
        drop-shadow(0 0 8px rgba(57,191,255,.85))
        drop-shadow(0 0 16px rgba(57,191,255,.55))
        drop-shadow(0 0 5px rgba(231,201,135,.55))
        drop-shadow(0 0 14px rgba(208,170,99,.30)) !important;
}


























/* =========================================================
   ARS BRAIN — SIX CORE PILLARS
   REAL HTML TARGET
   NO BODY CLASS / NO JS DEPENDENCY
   ========================================================= */

.arsbrain-pillars .pillars-grid .pillar-card.ars-glass {

    animation:
        arsPillarsFloat
        5.8s
        ease-in-out
        infinite !important;

    will-change: transform;
}


/* staggered living rhythm */

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(1) {
    animation-delay: 0s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(2) {
    animation-delay: -.7s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(3) {
    animation-delay: -1.4s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(4) {
    animation-delay: -2.1s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(5) {
    animation-delay: -2.8s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(6) {
    animation-delay: -3.5s !important;
}


/* subtle independent vertical breathing */

@keyframes arsPillarsFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0) !important;
    }

    50% {
        transform:
            translate3d(0, -5px, 0) !important;
    }
}


/* ---------------------------------------------------------
   SIGNAL LINE
--------------------------------------------------------- */

.arsbrain-pillars .pillars-grid .pillar-card.ars-glass::before {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(201,164,92,.35) 22%,
            rgba(255,242,194,.95) 50%,
            rgba(57,191,255,.65) 72%,
            transparent 100%
        );

    opacity: .35;

    transform: scaleX(.55);

    animation:
        arsPillarsSignal
        3.6s
        ease-in-out
        infinite;
}


@keyframes arsPillarsSignal {

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

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


/* ---------------------------------------------------------
   HOVER — stops float and reacts
--------------------------------------------------------- */

.arsbrain-pillars .pillars-grid .pillar-card.ars-glass:hover {

    animation-play-state: paused !important;

    transform:
        translate3d(0, -9px, 0) !important;

    border-color:
        rgba(228,189,104,.48) !important;

    box-shadow:
        0 25px 55px rgba(0,0,0,.62),
        0 0 25px rgba(201,164,92,.14),
        0 0 38px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(255,242,194,.14) !important;
}










/* =========================================================
   ARS BRAIN — SIX CORE PILLARS
   DISTINCT PREMIUM CARD MOTION
   ========================================================= */

.arsbrain-pillars .pillars-grid .pillar-card.ars-glass {
    position: relative !important;
    overflow: hidden !important;
    transform: translate3d(0,0,0);
    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        border-color .65s ease,
        box-shadow .65s ease !important;
    animation: arsPillarFloat 6s ease-in-out infinite !important;
}

/* هر کارت ریتم متفاوت */
.arsbrain-pillars .pillars-grid .pillar-card:nth-child(1) {
    animation-delay: 0s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(2) {
    animation-delay: -.8s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(3) {
    animation-delay: -1.6s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(4) {
    animation-delay: -2.4s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(5) {
    animation-delay: -3.2s !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(6) {
    animation-delay: -4s !important;
}


/* نور بسیار ظریف بالای هر کارت */
.arsbrain-pillars .pillars-grid .pillar-card::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(208,170,99,.75),
            rgba(255,242,194,.95),
            rgba(208,170,99,.75),
            transparent
        );
    opacity: .42;
    transform: scaleX(.55);
    transform-origin: center;
    animation: arsPillarSignal 4.5s ease-in-out infinite;
    pointer-events: none;
}


/* نور داخلی بسیار آرام */
.arsbrain-pillars .pillars-grid .pillar-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(208,170,99,.075),
            transparent 55%
        );
    opacity: .35;
    pointer-events: none;
    transition: opacity .6s ease;
}


/* Hover */
.arsbrain-pillars .pillars-grid .pillar-card:hover {
    transform: translateY(-9px) !important;
    border-color: rgba(231,201,135,.65) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        0 0 22px rgba(208,170,99,.18),
        inset 0 1px 0 rgba(255,242,194,.28) !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:hover::after {
    opacity: .7;
}


/* شماره کارت */
.arsbrain-pillars .pillar-number {
    transition:
        transform .6s ease,
        text-shadow .6s ease;
}

.arsbrain-pillars .pillar-card:hover .pillar-number {
    transform: translateX(5px);
    text-shadow:
        0 0 10px rgba(231,201,135,.55),
        0 0 22px rgba(208,170,99,.25);
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes arsPillarFloat {

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

    50% {
        transform: translate3d(0,-4px,0);
    }
}

@keyframes arsPillarSignal {

    0%, 100% {
        opacity: .20;
        transform: scaleX(.45);
    }

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


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .arsbrain-pillars .pillars-grid .pillar-card.ars-glass,
    .arsbrain-pillars .pillars-grid .pillar-card::before {
        animation: none !important;
    }
}



















/* =========================================================
   ARS BRAIN — PREMIUM CARD LANGUAGE
   DISTINCT MATERIALS / DEPTH / COLOR
   Based on actual ARS Brain HTML structure
   ========================================================= */


/* =========================================================
   01 — GLOBAL GLASS BASE
   فقط پایه؛ هر بخش ظاهر مخصوص خودش را می‌گیرد
   ========================================================= */

.arsbrain-page .ars-glass {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   02 — WHAT IS ARS BRAIN
   MATERIAL: WARM OBSIDIAN / GOLD
   ========================================================= */

.what-is-arsbrain .ars-glass {
    background:
        linear-gradient(
            135deg,
            rgba(35,26,16,.88) 0%,
            rgba(13,12,10,.94) 48%,
            rgba(8,13,18,.92) 100%
        ) !important;

    border: 1px solid rgba(208,170,99,.32) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.48),
        0 0 28px rgba(208,170,99,.08),
        inset 0 1px 0 rgba(255,242,194,.16),
        inset 0 0 35px rgba(208,170,99,.035) !important;

    border-radius: 26px !important;
}


/* =========================================================
   03 — ARCHITECTURE
   MATERIAL: ENGINEERING BLACK / ELECTRIC BLUE
   ========================================================= */

.arsbrain-architecture .architecture-card {
    background:
        linear-gradient(
            145deg,
            rgba(10,24,34,.94),
            rgba(5,10,15,.96) 58%,
            rgba(20,14,8,.82)
        ) !important;

    border: 1px solid rgba(57,191,255,.25) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        0 0 25px rgba(57,191,255,.07),
        inset 0 1px 0 rgba(121,221,255,.13) !important;

    border-radius: 18px !important;
}

.arsbrain-architecture .architecture-card:hover {
    border-color: rgba(121,221,255,.52) !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.62),
        0 0 30px rgba(57,191,255,.14),
        inset 0 1px 0 rgba(121,221,255,.25) !important;
}


/* =========================================================
   04 — SIX CORE PILLARS
   MATERIAL: SIX-PANEL ENGINEERING METAL
   ========================================================= */

.arsbrain-pillars .pillars-grid .pillar-card {
    background:
        linear-gradient(
            160deg,
            rgba(28,24,19,.94) 0%,
            rgba(11,11,10,.96) 52%,
            rgba(8,14,19,.94) 100%
        ) !important;

    border: 1px solid rgba(201,164,92,.22) !important;

    border-radius: 20px !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,242,194,.12),
        inset 0 0 24px rgba(201,164,92,.025) !important;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        border-color .55s ease,
        box-shadow .55s ease,
        background .55s ease !important;
}


/* هر دو ردیف کمی شخصیت متفاوت */
.arsbrain-pillars .pillars-grid .pillar-card:nth-child(odd) {
    background:
        linear-gradient(
            145deg,
            rgba(39,29,18,.92),
            rgba(12,11,9,.96) 65%,
            rgba(7,12,17,.95)
        ) !important;
}

.arsbrain-pillars .pillars-grid .pillar-card:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            rgba(10,20,28,.94),
            rgba(9,10,10,.96) 65%,
            rgba(27,19,11,.90)
        ) !important;

    border-color: rgba(57,191,255,.18) !important;
}


/* hover */
.arsbrain-pillars .pillars-grid .pillar-card:hover {
    transform: translateY(-8px) !important;

    border-color: rgba(231,201,135,.58) !important;

    box-shadow:
        0 24px 55px rgba(0,0,0,.60),
        0 0 26px rgba(208,170,99,.12),
        inset 0 1px 0 rgba(255,242,194,.22) !important;
}


/* =========================================================
   05 — PILLARS MESSAGE
   MATERIAL: DEEP OBSIDIAN / GOLD EDGE
   ========================================================= */

.arsbrain-pillars .pillars-message {
    background:
        linear-gradient(
            100deg,
            rgba(31,23,14,.92),
            rgba(9,10,10,.96) 50%,
            rgba(14,20,25,.92)
        ) !important;

    border: 1px solid rgba(208,170,99,.30) !important;

    border-radius: 30px !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,242,194,.15),
        0 0 35px rgba(208,170,99,.055) !important;
}


/* =========================================================
   06 — PLATFORM
   MATERIAL: PREMIUM AUTOMOTIVE COMPUTING
   ========================================================= */

.arsbrain-platform .ars-glass {
    background:
        linear-gradient(
            135deg,
            rgba(9,20,29,.94),
            rgba(7,10,13,.97) 52%,
            rgba(30,21,12,.90)
        ) !important;

    border: 1px solid rgba(57,191,255,.25) !important;

    box-shadow:
        0 22px 58px rgba(0,0,0,.58),
        0 0 30px rgba(57,191,255,.075),
        inset 0 1px 0 rgba(121,221,255,.13) !important;

    border-radius: 24px !important;
}


/* =========================================================
   07 — ARS HAVEN
   MATERIAL: WARM ENVIRONMENTAL GLASS
   ========================================================= */

#ars-haven .ars-glass {
    background:
        linear-gradient(
            135deg,
            rgba(42,30,18,.90),
            rgba(15,12,10,.96) 52%,
            rgba(25,30,29,.90)
        ) !important;

    border: 1px solid rgba(208,170,99,.30) !important;

    box-shadow:
        0 24px 60px rgba(0,0,0,.56),
        0 0 32px rgba(208,170,99,.065),
        inset 0 1px 0 rgba(255,242,194,.15) !important;

    border-radius: 28px !important;
}


/* =========================================================
   08 — ROSE AI
   MATERIAL: SOFT INTELLIGENCE / BLUE-GOLD GLASS
   ========================================================= */

.arsbrain-rose .ars-glass {
    background:
        linear-gradient(
            135deg,
            rgba(25,18,15,.90),
            rgba(9,13,18,.96) 48%,
            rgba(22,27,31,.91)
        ) !important;

    border: 1px solid rgba(121,221,255,.24) !important;

    box-shadow:
        0 22px 58px rgba(0,0,0,.56),
        0 0 32px rgba(57,191,255,.065),
        inset 0 1px 0 rgba(255,242,194,.12) !important;

    border-radius: 25px !important;
}


/* =========================================================
   09 — ZHR NAJI
   MATERIAL: PROTECTIVE DARK / BLUE GUARDIAN
   ========================================================= */

.arsbrain-zhr .ars-glass {
    background:
        linear-gradient(
            145deg,
            rgba(7,21,30,.96),
            rgba(6,10,14,.97) 55%,
            rgba(18,18,14,.92)
        ) !important;

    border: 1px solid rgba(57,191,255,.30) !important;

    box-shadow:
        0 24px 62px rgba(0,0,0,.62),
        0 0 35px rgba(57,191,255,.09),
        inset 0 1px 0 rgba(121,221,255,.17) !important;

    border-radius: 22px !important;
}


/* =========================================================
   10 — ARS OS
   MATERIAL: SYSTEM CONSOLE / DARK NAVY
   ========================================================= */

.arsbrain-os .ars-glass {
    background:
        linear-gradient(
            150deg,
            rgba(10,22,32,.96),
            rgba(6,10,15,.97) 58%,
            rgba(18,15,10,.90)
        ) !important;

    border: 1px solid rgba(57,191,255,.23) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.60),
        0 0 28px rgba(57,191,255,.07),
        inset 0 1px 0 rgba(121,221,255,.12) !important;

    border-radius: 20px !important;
}


/* =========================================================
   11 — FUTURE TECHNOLOGY
   MATERIAL: FUTURE METAL / BLUE-GOLD
   ========================================================= */

.arsbrain-future .ars-glass {
    background:
        linear-gradient(
            135deg,
            rgba(27,22,15,.90),
            rgba(7,12,17,.96) 48%,
            rgba(15,25,32,.92)
        ) !important;

    border: 1px solid rgba(121,221,255,.25) !important;

    box-shadow:
        0 25px 65px rgba(0,0,0,.60),
        0 0 35px rgba(57,191,255,.07),
        0 0 18px rgba(208,170,99,.055),
        inset 0 1px 0 rgba(255,242,194,.14) !important;

    border-radius: 26px !important;
}


/* =========================================================
   12 — UNIVERSAL MICRO LIGHT
   ========================================================= */

.arsbrain-pillars .pillar-card::before,
.what-is-arsbrain .ars-glass::before,
.arsbrain-platform .ars-glass::before,
#ars-haven .ars-glass::before,
.arsbrain-rose .ars-glass::before,
.arsbrain-zhr .ars-glass::before,
.arsbrain-os .ars-glass::before,
.arsbrain-future .ars-glass::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,242,194,.55),
            rgba(208,170,99,.75),
            transparent
        );

    opacity: .38;
    pointer-events: none;
}


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

@media (max-width:700px) {

    .arsbrain-pillars .pillars-grid .pillar-card,
    .what-is-arsbrain .ars-glass,
    .arsbrain-platform .ars-glass,
    #ars-haven .ars-glass,
    .arsbrain-rose .ars-glass,
    .arsbrain-zhr .ars-glass,
    .arsbrain-os .ars-glass,
    .arsbrain-future .ars-glass {
        border-radius: 18px !important;
    }
}















































/* =========================================================
   ARS BRAIN — SIX CORE PILLARS
   DEDICATED LUXURY 3D DESIGN SYSTEM
   HTML UNCHANGED
   ========================================================= */

.arsbrain-pillars {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            ellipse at 15% 35%,
            rgba(57,191,255,.10),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 85% 65%,
            rgba(137,94,50,.12),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 50% 50%,
            rgba(201,164,92,.055),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #020507 0%,
            #07121b 32%,
            #0b0c0d 56%,
            #100b07 78%,
            #030303 100%
        ) !important;

    perspective: 1600px !important;
}


/* =========================================================
   ATMOSPHERIC INTELLIGENCE FIELD
   ========================================================= */

.arsbrain-pillars::before {
    content: "";
    position: absolute;
    inset: -20%;

    background:
        radial-gradient(
            circle at 18% 28%,
            rgba(57,191,255,.14) 0,
            rgba(57,191,255,.045) 14%,
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(137,94,50,.16) 0,
            rgba(137,94,50,.055) 18%,
            transparent 38%
        );

    filter: blur(25px);
    pointer-events: none;
    z-index: -3;

    animation: arsPillarAtmosphere 10s ease-in-out infinite;
}


.arsbrain-pillars::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.18),
            rgba(208,170,99,.38),
            rgba(255,242,194,.28),
            rgba(137,94,50,.30),
            rgba(57,191,255,.16),
            transparent
        );

    box-shadow:
        0 0 12px rgba(57,191,255,.12),
        0 0 25px rgba(208,170,99,.08);

    opacity: .65;
    pointer-events: none;
    z-index: -2;

    animation: arsPillarEnergyLine 7s ease-in-out infinite;
}


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

.arsbrain-pillars .section-heading {
    position: relative !important;
    z-index: 5 !important;
    margin-bottom: 58px !important;
}

.arsbrain-pillars .section-heading .section-label {
    color: #79ddff !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.45),
        0 0 18px rgba(57,191,255,.18) !important;
}

.arsbrain-pillars .section-heading h2 {
    color: #fff8df !important;

    text-shadow:
        0 0 18px rgba(255,242,194,.12),
        0 0 35px rgba(57,191,255,.07) !important;
}

.arsbrain-pillars .section-heading p {
    color: rgba(217,210,198,.76) !important;
}


/* =========================================================
   GRID
   ========================================================= */

.arsbrain-pillars .pillars-grid {
    position: relative !important;
    z-index: 4 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 24px !important;

    perspective: 1800px !important;
}


/* =========================================================
   CORE 3D PILLAR CARD
   ========================================================= */

.arsbrain-pillars .pillars-grid .pillar-card {
    position: relative !important;

    min-height: 285px !important;
    padding: 34px 30px 32px !important;

    overflow: hidden !important;
    isolation: isolate !important;

    border-radius: 24px !important;

    border:
        1px solid rgba(57,191,255,.30) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.105) 0%,
            rgba(11,27,39,.78) 28%,
            rgba(13,13,13,.90) 52%,
            rgba(52,36,22,.58) 76%,
            rgba(137,94,50,.16) 100%
        ) !important;

    box-shadow:
        0 24px 55px rgba(0,0,0,.62),
        0 8px 22px rgba(57,191,255,.10),
        0 0 32px rgba(137,94,50,.08),
        inset 0 1px 0 rgba(255,242,194,.25),
        inset 0 -1px 0 rgba(57,191,255,.12),
        inset 18px 0 40px rgba(57,191,255,.025),
        inset -18px 0 40px rgba(137,94,50,.035) !important;

    backdrop-filter:
        blur(20px)
        saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(20px)
        saturate(145%) !important;

    transform:
        perspective(1200px)
        translateZ(0)
        rotateX(0deg)
        rotateY(0deg) !important;

    transform-style: preserve-3d !important;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        border-color .5s ease,
        box-shadow .6s ease,
        background .6s ease !important;

    animation:
        arsPillarFloat 7s ease-in-out infinite !important;
}


/* =========================================================
   TOP ENERGY EDGE
   ========================================================= */

.arsbrain-pillars .pillar-card::before {
    content: "";
    position: absolute;

    left: 8%;
    right: 8%;
    top: -1px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.55) 18%,
            #79ddff 38%,
            #fff2c2 50%,
            #d0aa63 63%,
            rgba(137,94,50,.55) 82%,
            transparent 100%
        );

    box-shadow:
        0 0 8px rgba(57,191,255,.65),
        0 0 18px rgba(57,191,255,.28),
        0 0 28px rgba(208,170,99,.18);

    opacity: .78;

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

    z-index: 8;
}


/* =========================================================
   INTERNAL BLUE / BRONZE LIGHT FIELD
   ========================================================= */

.arsbrain-pillars .pillar-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(57,191,255,.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 88%,
            rgba(137,94,50,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            transparent 40%,
            rgba(255,242,194,.025) 50%,
            transparent 60%
        );

    opacity: .55;
    pointer-events: none;
    z-index: -1;

    transition:
        opacity .6s ease,
        transform .8s ease !important;
}


/* =========================================================
   NUMBER — FLOATING METALLIC MODULE
   ========================================================= */

.arsbrain-pillars .pillar-number {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    margin-bottom: 25px !important;

    border-radius: 14px !important;

    border:
        1px solid rgba(57,191,255,.42) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.16),
            rgba(10,22,31,.92) 48%,
            rgba(137,94,50,.24)
        ) !important;

    color: #79ddff !important;

    box-shadow:
        0 10px 22px rgba(0,0,0,.45),
        0 0 15px rgba(57,191,255,.14),
        inset 0 1px 0 rgba(255,242,194,.25) !important;

    transform:
        translateZ(28px) !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.65) !important;

    transition:
        transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease !important;
}


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

.arsbrain-pillars .pillar-card h3 {
    position: relative !important;
    z-index: 3 !important;

    color: #fff2c2 !important;

    font-size: 20px !important;
    font-weight: 600 !important;

    letter-spacing: .025em !important;

    transform:
        translateZ(24px) !important;

    text-shadow:
        0 0 10px rgba(255,242,194,.12),
        0 0 22px rgba(57,191,255,.06) !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.arsbrain-pillars .pillar-card p {
    position: relative !important;
    z-index: 3 !important;

    color: rgba(217,210,198,.78) !important;

    line-height: 1.85 !important;

    transform:
        translateZ(18px) !important;
}


/* =========================================================
   3D HOVER
   ========================================================= */

.arsbrain-pillars .pillar-card:hover {
    transform:
        perspective(1200px)
        translateY(-12px)
        translateZ(28px)
        rotateX(2deg)
        rotateY(-2deg) !important;

    border-color:
        rgba(121,221,255,.62) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.15),
            rgba(12,29,42,.84) 32%,
            rgba(15,14,13,.91) 55%,
            rgba(79,53,30,.65) 78%,
            rgba(137,94,50,.22)
        ) !important;

    box-shadow:
        0 35px 75px rgba(0,0,0,.72),
        0 0 32px rgba(57,191,255,.18),
        0 0 65px rgba(137,94,50,.12),
        inset 0 1px 0 rgba(255,242,194,.38),
        inset 0 0 35px rgba(57,191,255,.055) !important;

    animation-play-state: paused !important;
}

.arsbrain-pillars .pillar-card:hover::after {
    opacity: .95 !important;
    transform: scale(1.08) !important;
}

.arsbrain-pillars .pillar-card:hover .pillar-number {
    transform:
        translateZ(42px)
        rotateZ(-3deg) !important;

    border-color:
        rgba(121,221,255,.72) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.48),
        0 0 20px rgba(57,191,255,.28),
        0 0 34px rgba(137,94,50,.14),
        inset 0 1px 0 rgba(255,242,194,.38) !important;
}


/* =========================================================
   SIX MODULE PERSONALITIES
   ========================================================= */

/* 01 — BLUE / COMPUTING */

.arsbrain-pillars .pillar-card:nth-child(1) {
    border-color: rgba(57,191,255,.42) !important;
}

.arsbrain-pillars .pillar-card:nth-child(1) .pillar-number {
    color: #79ddff !important;
}


/* 02 — BRONZE / CONNECTIVITY */

.arsbrain-pillars .pillar-card:nth-child(2) {
    border-color: rgba(137,94,50,.52) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.08),
            rgba(22,29,34,.78) 30%,
            rgba(48,34,21,.72) 68%,
            rgba(137,94,50,.22)
        ) !important;
}

.arsbrain-pillars .pillar-card:nth-child(2) .pillar-number {
    color: #d0a060 !important;
    border-color: rgba(137,94,50,.55) !important;
}


/* 03 — GOLD / AI */

.arsbrain-pillars .pillar-card:nth-child(3) {
    border-color: rgba(208,170,99,.45) !important;
}

.arsbrain-pillars .pillar-card:nth-child(3) .pillar-number {
    color: #fff2c2 !important;
    border-color: rgba(208,170,99,.55) !important;
}


/* 04 — ELECTRIC BLUE / SAFETY */

.arsbrain-pillars .pillar-card:nth-child(4) {
    border-color: rgba(57,191,255,.50) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.14),
            rgba(7,20,30,.86) 48%,
            rgba(39,29,20,.48)
        ) !important;
}


/* 05 — CHAMPAGNE / EXPERIENCE */

.arsbrain-pillars .pillar-card:nth-child(5) {
    border-color: rgba(231,201,135,.43) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.07),
            rgba(16,16,16,.88) 45%,
            rgba(137,94,50,.38)
        ) !important;
}

.arsbrain-pillars .pillar-card:nth-child(5) .pillar-number {
    color: #e7c987 !important;
}


/* 06 — BLUE + BRONZE / FUTURE */

.arsbrain-pillars .pillar-card:nth-child(6) {
    border-color: rgba(121,221,255,.44) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.13),
            rgba(9,23,32,.82) 34%,
            rgba(20,17,14,.84) 65%,
            rgba(137,94,50,.25)
        ) !important;
}


/* =========================================================
   PILLARS MESSAGE — MASTER INTELLIGENCE PANEL
   ========================================================= */

.arsbrain-pillars .pillars-message {
    position: relative !important;
    margin-top: 34px !important;

    padding: 28px 34px !important;

    border-radius: 20px !important;

    border:
        1px solid rgba(57,191,255,.22) !important;

    background:
        linear-gradient(
            105deg,
            rgba(57,191,255,.075),
            rgba(10,15,19,.82) 42%,
            rgba(137,94,50,.12)
        ) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,242,194,.18),
        inset 0 0 30px rgba(57,191,255,.025) !important;

    backdrop-filter: blur(16px) !important;

    transform:
        translateZ(12px) !important;
}


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

@keyframes arsPillarFloat {

    0%,100% {
        transform:
            perspective(1200px)
            translateY(0)
            translateZ(0)
            rotateX(0deg)
            rotateY(0deg);
    }

    50% {
        transform:
            perspective(1200px)
            translateY(-4px)
            translateZ(5px)
            rotateX(.35deg)
            rotateY(-.25deg);
    }
}


@keyframes arsPillarTopEnergy {

    0%,100% {
        opacity: .42;
        transform: scaleX(.72);
    }

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


@keyframes arsPillarAtmosphere {

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

    50% {
        transform: scale(1.08) translate3d(1%, -1%, 0);
        opacity: 1;
    }
}


@keyframes arsPillarEnergyLine {

    0%,100% {
        opacity: .28;
        transform: scaleX(.72);
    }

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


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .arsbrain-pillars .pillars-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

}


@media (max-width: 600px) {

    .arsbrain-pillars .pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .arsbrain-pillars .pillars-grid .pillar-card {
        min-height: 250px !important;
        padding: 28px 24px !important;
    }

    .arsbrain-pillars .pillars-message {
        padding: 24px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .arsbrain-pillars::before,
    .arsbrain-pillars::after,
    .arsbrain-pillars .pillar-card,
    .arsbrain-pillars .pillar-card::before {
        animation: none !important;
    }

   }
























/* =========================================================
   ARS BRAIN — WHAT IS ARS BRAIN
   DEDICATED FINAL SECTION DESIGN
   INTELLIGENCE CHAMBER
   HTML UNCHANGED
   ========================================================= */

.what-is-arsbrain {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            ellipse at 12% 48%,
            rgba(137,94,50,.18) 0%,
            rgba(137,94,50,.06) 24%,
            transparent 46%
        ),
        radial-gradient(
            ellipse at 88% 45%,
            rgba(57,191,255,.13) 0%,
            rgba(57,191,255,.045) 25%,
            transparent 48%
        ),
        linear-gradient(
            115deg,
            #020304 0%,
            #0a0e12 27%,
            #11100d 50%,
            #17110a 73%,
            #030405 100%
        ) !important;

    perspective: 1600px !important;
}


/* =========================================================
   ATMOSPHERIC FIELD
   ========================================================= */

.what-is-arsbrain::before {
    content: "";
    position: absolute;
    inset: -15%;

    background:
        radial-gradient(
            circle at 30% 52%,
            rgba(137,94,50,.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 72% 44%,
            rgba(57,191,255,.11),
            transparent 34%
        );

    filter: blur(38px);
    pointer-events: none;
    z-index: -3;

    animation:
        arsWhatAtmosphere 11s ease-in-out infinite;
}


/* fine intelligence axis */

.what-is-arsbrain::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(137,94,50,.22),
            rgba(208,170,99,.48),
            rgba(121,221,255,.32),
            rgba(57,191,255,.22),
            transparent
        );

    opacity: .55;

    pointer-events: none;
    z-index: -2;

    animation:
        arsWhatAxis 8s ease-in-out infinite;
}


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

.what-is-arsbrain .container {
    position: relative !important;
    z-index: 3 !important;
}


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

.what-is-arsbrain .section-heading {
    position: relative !important;
    z-index: 5 !important;

    margin-bottom: 64px !important;
}

.what-is-arsbrain .section-heading .section-label {
    color: #79ddff !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.55),
        0 0 22px rgba(57,191,255,.20) !important;
}

.what-is-arsbrain .section-heading h2 {
    color: #fff8df !important;

    letter-spacing: -.025em !important;

    text-shadow:
        0 0 18px rgba(255,242,194,.12),
        0 0 40px rgba(57,191,255,.07) !important;
}

.what-is-arsbrain .section-heading p {
    color: rgba(217,210,198,.78) !important;
}


/* =========================================================
   MAIN CONTENT LAYOUT
   ========================================================= */

.what-is-arsbrain .intro-grid {
    position: relative !important;
    z-index: 5 !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr) !important;

    gap: 30px !important;

    align-items: stretch !important;

    perspective: 1800px !important;
}


/* =========================================================
   TWO LARGE INTELLIGENCE PANELS
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass {
    position: relative !important;

    min-height: 410px !important;

    padding: 42px !important;

    border-radius: 30px !important;

    overflow: hidden !important;
    isolation: isolate !important;

    border:
        1px solid rgba(137,94,50,.52) !important;

    background:
        linear-gradient(
            145deg,
            rgba(137,94,50,.22) 0%,
            rgba(57,191,255,.075) 24%,
            rgba(10,14,18,.90) 49%,
            rgba(39,29,19,.84) 76%,
            rgba(137,94,50,.20) 100%
        ) !important;

    box-shadow:
        0 30px 70px rgba(0,0,0,.68),
        0 0 35px rgba(137,94,50,.12),
        0 0 55px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(255,242,194,.25),
        inset 0 0 50px rgba(137,94,50,.055),
        inset 20px 0 50px rgba(57,191,255,.025) !important;

    backdrop-filter:
        blur(22px)
        saturate(140%) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(140%) !important;

    transform:
        translateZ(0) !important;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        border-color .6s ease,
        box-shadow .7s ease !important;

    animation:
        arsWhatPanelFloat 8s ease-in-out infinite !important;
}


/* =========================================================
   PANEL TOP EDGE
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass::before {
    content: "";

    position: absolute;
    left: 8%;
    right: 8%;
    top: -1px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(137,94,50,.75) 20%,
            #d0aa63 42%,
            #fff2c2 50%,
            #79ddff 65%,
            rgba(57,191,255,.65) 82%,
            transparent
        );

    box-shadow:
        0 0 9px rgba(208,170,99,.55),
        0 0 20px rgba(57,191,255,.22);

    opacity: .85;

    animation:
        arsWhatEdgePulse 6s ease-in-out infinite;

    z-index: 8;
}


/* =========================================================
   PANEL INTERNAL LIGHT
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(137,94,50,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(57,191,255,.11),
            transparent 31%
        ),
        linear-gradient(
            125deg,
            transparent 35%,
            rgba(255,242,194,.035) 50%,
            transparent 65%
        );

    opacity: .60;

    pointer-events: none;
    z-index: -1;

    transition:
        opacity .7s ease,
        transform 1s ease !important;
}


/* =========================================================
   PANEL CONTENT DEPTH
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass > * {
    position: relative !important;
    z-index: 3 !important;

    transform:
        translateZ(18px) !important;
}


/* =========================================================
   PANEL TYPOGRAPHY
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass h3 {
    color: #fff2c2 !important;

    font-size: clamp(23px, 2vw, 30px) !important;
    font-weight: 600 !important;

    letter-spacing: -.01em !important;

    text-shadow:
        0 0 12px rgba(255,242,194,.14),
        0 0 25px rgba(57,191,255,.06) !important;
}

.what-is-arsbrain .intro-grid .ars-glass p {
    color: rgba(217,210,198,.80) !important;

    line-height: 1.95 !important;
}


/* =========================================================
   GOLD / BLUE ACCENT MARKER
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass h3::after {
    content: "";

    display: block;

    width: 58px;
    height: 2px;

    margin-top: 16px;

    background:
        linear-gradient(
            90deg,
            #d0aa63,
            #fff2c2,
            #79ddff,
            transparent
        );

    box-shadow:
        0 0 8px rgba(208,170,99,.45),
        0 0 16px rgba(57,191,255,.18);
}


/* =========================================================
   IMAGE CHAMBER
   ========================================================= */

.what-is-arsbrain .arsbrain-image,
.what-is-arsbrain .intro-image {
    position: relative !important;

    overflow: hidden !important;

    border-radius: 30px !important;

    border:
        1px solid rgba(57,191,255,.40) !important;

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.11),
            rgba(7,17,25,.92) 45%,
            rgba(45,31,18,.80)
        ) !important;

    box-shadow:
        0 30px 70px rgba(0,0,0,.70),
        0 0 35px rgba(57,191,255,.12),
        0 0 55px rgba(137,94,50,.10),
        inset 0 1px 0 rgba(121,221,255,.25) !important;

    transform:
        translateZ(22px) !important;
}


/* image */

.what-is-arsbrain .arsbrain-image img,
.what-is-arsbrain .intro-image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    object-fit: cover !important;

    filter:
        saturate(.88)
        contrast(1.06)
        brightness(.96) !important;

    transition:
        transform 1.1s cubic-bezier(.2,.8,.2,1),
        filter 1s ease !important;
}


/* =========================================================
   IMAGE SCANNER
   ========================================================= */

.what-is-arsbrain .arsbrain-image::after,
.what-is-arsbrain .intro-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -20%;

    height: 18%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(121,221,255,.08),
            rgba(255,242,194,.20),
            rgba(57,191,255,.08),
            transparent
        );

    box-shadow:
        0 0 18px rgba(57,191,255,.16);

    opacity: .65;

    pointer-events: none;

    animation:
        arsWhatImageScan 8s ease-in-out infinite;
}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.what-is-arsbrain .arsbrain-image::before,
.what-is-arsbrain .intro-image::before {
    content: "";

    position: absolute;
    inset: 10px;

    border:
        1px solid rgba(137,94,50,.28);

    border-radius: 23px;

    pointer-events: none;
    z-index: 4;

    box-shadow:
        inset 0 0 25px rgba(137,94,50,.08),
        inset 0 0 35px rgba(57,191,255,.035);
}


/* =========================================================
   HOVER — CONTROLLED 3D
   ========================================================= */

.what-is-arsbrain .intro-grid .ars-glass:hover {
    transform:
        translateY(-10px)
        translateZ(24px)
        rotateX(1deg)
        rotateY(-1deg) !important;

    border-color:
        rgba(121,221,255,.58) !important;

    box-shadow:
        0 38px 85px rgba(0,0,0,.74),
        0 0 38px rgba(57,191,255,.18),
        0 0 65px rgba(137,94,50,.14),
        inset 0 1px 0 rgba(255,242,194,.38),
        inset 0 0 45px rgba(57,191,255,.045) !important;

    animation-play-state: paused !important;
}

.what-is-arsbrain .intro-grid .ars-glass:hover::after {
    opacity: .95 !important;
    transform: scale(1.06) !important;
}

.what-is-arsbrain .arsbrain-image:hover img,
.what-is-arsbrain .intro-image:hover img {
    transform: scale(1.025) !important;

    filter:
        saturate(.98)
        contrast(1.08)
        brightness(1.02) !important;
}


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

@keyframes arsWhatAtmosphere {

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

    50% {
        transform: scale(1.07) translate3d(1%,-.5%,0);
        opacity: 1;
    }
}


@keyframes arsWhatAxis {

    0%,100% {
        opacity: .28;
        transform: scaleX(.72);
    }

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


@keyframes arsWhatPanelFloat {

    0%,100% {
        transform:
            translateY(0)
            translateZ(0);
    }

    50% {
        transform:
            translateY(-4px)
            translateZ(5px);
    }
}


@keyframes arsWhatEdgePulse {

    0%,100% {
        opacity: .48;
        transform: scaleX(.78);
    }

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


@keyframes arsWhatImageScan {

    0%,55% {
        top: -20%;
        opacity: 0;
    }

    62% {
        opacity: .72;
    }

    78% {
        top: 105%;
        opacity: .38;
    }

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


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .what-is-arsbrain .intro-grid {
        grid-template-columns: 1fr !important;
    }

    .what-is-arsbrain .intro-grid .ars-glass {
        min-height: 350px !important;
    }

}


@media (max-width: 600px) {

    .what-is-arsbrain .intro-grid {
        gap: 18px !important;
    }

    .what-is-arsbrain .intro-grid .ars-glass {
        min-height: 300px !important;
        padding: 28px 24px !important;
        border-radius: 24px !important;
    }

    .what-is-arsbrain .arsbrain-image,
    .what-is-arsbrain .intro-image {
        border-radius: 24px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .what-is-arsbrain::before,
    .what-is-arsbrain::after,
    .what-is-arsbrain .intro-grid .ars-glass,
    .what-is-arsbrain .intro-grid .ars-glass::before,
    .what-is-arsbrain .arsbrain-image::after,
    .what-is-arsbrain .intro-image::after {
        animation: none !important;
    }

       }









/* =========================================================
   WHAT IS ARS BRAIN
   INTELLIGENCE CHAMBER — FINAL LIGHT MOTION
   HTML UNCHANGED
   ========================================================= */

.what-is-arsbrain {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   ATMOSPHERIC GOLD / BRONZE LIGHT
   --------------------------------------------------------- */

.what-is-arsbrain::before {
    content: "";
    position: absolute;

    left: -35%;
    top: 12%;
    width: 42%;
    height: 76%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,242,194,.12) 0%,
            rgba(208,170,99,.10) 24%,
            rgba(137,94,50,.07) 46%,
            transparent 74%
        );

    filter: blur(28px);

    opacity: .35;

    pointer-events: none;
    z-index: 0;

    animation:
        whatIsAmbientLight
        11s ease-in-out infinite;
}


/* ---------------------------------------------------------
   SECONDARY BLUE / BRONZE ATMOSPHERE
   --------------------------------------------------------- */

.what-is-arsbrain::after {
    content: "";
    position: absolute;

    right: -30%;
    top: 20%;
    width: 40%;
    height: 65%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(57,191,255,.055) 0%,
            rgba(137,94,50,.075) 34%,
            transparent 72%
        );

    filter: blur(34px);

    opacity: .55;

    pointer-events: none;
    z-index: 0;

    animation:
        whatIsAmbientBlue
        13s ease-in-out infinite;
}


/* ---------------------------------------------------------
   CARDS — METALLIC BREATHING
   --------------------------------------------------------- */

.what-is-arsbrain .intro-grid .ars-glass {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    animation:
        whatIsCardBreath
        7s ease-in-out infinite !important;
}


/* Fine metallic upper edge */

.what-is-arsbrain .intro-grid .ars-glass::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(137,94,50,.25) 18%,
            rgba(208,170,99,.65) 38%,
            rgba(255,242,194,.92) 50%,
            rgba(208,170,99,.62) 62%,
            rgba(137,94,50,.22) 82%,
            transparent 100%
        );

    box-shadow:
        0 0 8px rgba(208,170,99,.28),
        0 0 20px rgba(137,94,50,.12);

    opacity: .55;

    pointer-events: none;
    z-index: 8;

    transform-origin: center;

    animation:
        whatIsEdgePulse
        6s ease-in-out infinite;
}


/* ---------------------------------------------------------
   METALLIC REFLECTION PASS
   --------------------------------------------------------- */

.what-is-arsbrain .intro-grid .ars-glass::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -55%;

    width: 24%;
    height: 160%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(137,94,50,.04) 25%,
            rgba(208,170,99,.18) 42%,
            rgba(255,242,194,.42) 50%,
            rgba(208,170,99,.16) 58%,
            rgba(137,94,50,.035) 75%,
            transparent 100%
        );

    filter: blur(6px);

    opacity: 0;

    pointer-events: none;
    z-index: 9;

    transform: rotate(12deg);

    animation:
        whatIsMetalSweep
        9s cubic-bezier(.45,0,.25,1)
        infinite;
}


/* ---------------------------------------------------------
   IMAGE — VERY SUBTLE ENVIRONMENTAL LIGHT
   --------------------------------------------------------- */

.what-is-arsbrain .intro-grid img.arsbrain-image,
.what-is-arsbrain .intro-grid img.intro-image {
    animation:
        whatIsImageBreath
        8s ease-in-out infinite !important;

    transform-origin: center center !important;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes whatIsAmbientLight {

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

    50% {
        transform: translate3d(115%,4%,0) scale(1.08);
        opacity: .62;
    }
}


@keyframes whatIsAmbientBlue {

    0%, 100% {
        transform: translate3d(0,0,0) scale(.94);
        opacity: .38;
    }

    50% {
        transform: translate3d(-90%,-3%,0) scale(1.08);
        opacity: .72;
    }
}


@keyframes whatIsCardBreath {

    0%, 100% {
        box-shadow:
            0 22px 55px rgba(0,0,0,.58),
            0 0 18px rgba(208,170,99,.07),
            0 0 32px rgba(57,191,255,.035),
            inset 0 1px 0 rgba(255,242,194,.14);
    }

    50% {
        box-shadow:
            0 25px 62px rgba(0,0,0,.64),
            0 0 28px rgba(208,170,99,.14),
            0 0 46px rgba(57,191,255,.055),
            inset 0 1px 0 rgba(255,242,194,.24);
    }
}


@keyframes whatIsEdgePulse {

    0%, 100% {
        opacity: .38;
        transform: scaleX(.72);
    }

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


@keyframes whatIsMetalSweep {

    0%, 68% {
        left: -55%;
        opacity: 0;
    }

    74% {
        opacity: .12;
    }

    82% {
        opacity: .58;
    }

    91% {
        left: 125%;
        opacity: .12;
    }

    96%, 100% {
        left: 145%;
        opacity: 0;
    }
}


@keyframes whatIsImageBreath {

    0%, 100% {
        filter:
            brightness(.96)
            saturate(.96)
            contrast(1.02);
    }

    50% {
        filter:
            brightness(1.035)
            saturate(1.01)
            contrast(1.045);
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .what-is-arsbrain::before,
    .what-is-arsbrain::after,
    .what-is-arsbrain .intro-grid .ars-glass,
    .what-is-arsbrain .intro-grid .ars-glass::before,
    .what-is-arsbrain .intro-grid .ars-glass::after,
    .what-is-arsbrain .intro-grid img.arsbrain-image,
    .what-is-arsbrain .intro-grid img.intro-image {
        animation: none !important;
    }
   }

























/* =========================================================
   ARS BRAIN — SYSTEM ARCHITECTURE
   AUTOMOTIVE ENGINEERING INTELLIGENCE
   MATTE BRONZE × ELECTRIC BLUE
   ========================================================= */

.arsbrain-architecture {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(57,191,255,.10) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 18% 58%,
            rgba(137,94,50,.24) 0%,
            transparent 38%
        ),
        radial-gradient(
            ellipse at 84% 38%,
            rgba(137,94,50,.20) 0%,
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #020304 0%,
            #07111a 28%,
            #0b1117 50%,
            #15100b 72%,
            #030303 100%
        ) !important;
}


/* =========================================================
   ENGINEERING ATMOSPHERE
   ========================================================= */

.arsbrain-architecture::before {
    content: "";
    position: absolute;
    inset: -20%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.025) 24%,
            rgba(208,170,99,.035) 50%,
            rgba(57,191,255,.025) 76%,
            transparent 100%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(137,94,50,.14),
            transparent 48%
        );

    pointer-events: none;
    z-index: 0;

    animation:
        arsArchitectureAtmosphere
        14s ease-in-out infinite;
}


/* Fine engineering grid */

.arsbrain-architecture::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(121,221,255,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(121,221,255,.028) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.72) 42%,
            transparent 78%
        );

    opacity: .42;

    pointer-events: none;
    z-index: 0;
}


/* =========================================================
   HEADING
   ========================================================= */

.arsbrain-architecture .section-heading {
    position: relative;
    z-index: 10;
}

.arsbrain-architecture .section-heading .section-label {
    color: #79ddff !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.42),
        0 0 22px rgba(57,191,255,.16);
}

.arsbrain-architecture .section-heading h2 {
    color: #fff8df !important;

    text-shadow:
        0 2px 20px rgba(0,0,0,.8),
        0 0 30px rgba(208,170,99,.08);
}


/* =========================================================
   MAIN ARCHITECTURE VISUAL
   ========================================================= */

.arsbrain-architecture .architecture-visual {
    position: relative !important;
    isolation: isolate !important;

    border: 1px solid rgba(159,109,56,.48) !important;

    background:
        linear-gradient(
            145deg,
            rgba(137,94,50,.20),
            rgba(8,18,26,.91) 38%,
            rgba(4,9,14,.96) 62%,
            rgba(57,191,255,.075)
        ) !important;

    box-shadow:
        0 35px 85px rgba(0,0,0,.78),
        0 0 28px rgba(137,94,50,.12),
        0 0 45px rgba(57,191,255,.08),
        inset 0 1px 0 rgba(255,242,194,.18),
        inset 0 0 55px rgba(57,191,255,.025) !important;

    backdrop-filter:
        blur(18px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%) !important;

    transform-style: preserve-3d;
}


/* Metallic engineering frame */

.arsbrain-architecture .architecture-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    border: 1px solid rgba(208,170,99,.16);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.06) 48%,
            rgba(208,170,99,.08) 52%,
            transparent 100%
        );

    pointer-events: none;
    z-index: 4;
}


/* =========================================================
   ARCHITECTURE IMAGE
   ========================================================= */

.arsbrain-architecture .architecture-image {
    position: relative !important;

    border:
        1px solid rgba(137,94,50,.55) !important;

    background:
        #03070b !important;

    box-shadow:
        0 25px 55px rgba(0,0,0,.70),
        0 0 25px rgba(57,191,255,.07),
        0 0 30px rgba(137,94,50,.09) !important;

    overflow: hidden !important;
}


/* Image itself */

.arsbrain-architecture .architecture-image img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    filter:
        saturate(.78)
        contrast(1.10)
        brightness(.88) !important;

    transition:
        filter 1s ease,
        transform 1.2s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   ENGINEERING SCAN
   ========================================================= */

.arsbrain-architecture .architecture-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -4%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.18) 18%,
            #39bfff 40%,
            #d9f8ff 50%,
            #d0aa63 60%,
            rgba(137,94,50,.18) 82%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(57,191,255,.75),
        0 0 18px rgba(57,191,255,.30),
        0 0 26px rgba(208,170,99,.16);

    opacity: 0;

    pointer-events: none;

    z-index: 8;

    animation:
        arsArchitectureScan
        9s ease-in-out infinite;
}


/* =========================================================
   ARCHITECTURE CARDS
   ========================================================= */

.arsbrain-architecture .architecture-card {
    position: relative !important;
    isolation: isolate !important;

    border:
        1px solid rgba(137,94,50,.44) !important;

    background:
        linear-gradient(
            135deg,
            rgba(137,94,50,.22),
            rgba(8,18,26,.91) 42%,
            rgba(5,10,15,.96) 68%,
            rgba(57,191,255,.075)
        ) !important;

    box-shadow:
        0 22px 48px rgba(0,0,0,.65),
        0 0 20px rgba(137,94,50,.08),
        0 0 30px rgba(57,191,255,.045),
        inset 0 1px 0 rgba(255,242,194,.14) !important;

    backdrop-filter:
        blur(16px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(135%) !important;

    transform:
        perspective(1100px)
        translateZ(0);

    transform-style: preserve-3d;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        border-color .5s ease,
        box-shadow .6s ease;
}


/* Card engineering edge */

.arsbrain-architecture .architecture-card::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(137,94,50,.42),
            rgba(208,170,99,.82),
            #79ddff,
            rgba(57,191,255,.42),
            transparent
        );

    box-shadow:
        0 0 9px rgba(57,191,255,.20);

    opacity: .72;

    pointer-events: none;
}


/* Data indicator */

.arsbrain-architecture .architecture-card::after {
    content: "";

    position: absolute;

    right: 14px;
    top: 14px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #79ddff;

    box-shadow:
        0 0 7px rgba(121,221,255,.90),
        0 0 16px rgba(57,191,255,.42);

    animation:
        arsArchitectureNode
        3.8s ease-in-out infinite;
}


/* =========================================================
   CARD TYPOGRAPHY
   ========================================================= */

.arsbrain-architecture .architecture-card h3 {
    position: relative;
    z-index: 3;

    color: #e7c987 !important;

    text-shadow:
        0 0 10px rgba(208,170,99,.18);
}

.arsbrain-architecture .architecture-card p {
    position: relative;
    z-index: 3;

    color: rgba(245,241,232,.74) !important;
}


/* =========================================================
   ACTIVE ARCHITECTURE MOTION LAYER
   Works with the EXISTING inline architecture script
   ========================================================= */

.arsbrain-architecture
.ars-architecture-motion-layer {
    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    z-index: 7 !important;
}


/* Existing scanner */

.arsbrain-architecture
.ars-architecture-motion-layer
.ars-architecture-scanner {
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(57,191,255,.025) 35%,
            rgba(121,221,255,.65) 50%,
            rgba(208,170,99,.18) 53%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 14px rgba(57,191,255,.22),
        0 0 30px rgba(57,191,255,.08) !important;
}


/* Existing motion lines */

.arsbrain-architecture
.ars-architecture-motion-layer
.ars-architecture-line {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.72),
            #79ddff,
            rgba(208,170,99,.68),
            transparent
        ) !important;

    box-shadow:
        0 0 6px rgba(57,191,255,.42),
        0 0 15px rgba(208,170,99,.14) !important;
}


/* Existing data packets */

.arsbrain-architecture
.ars-architecture-motion-layer
.ars-architecture-packet {
    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #d9f8ff 24%,
            #79ddff 48%,
            #39bfff 68%,
            rgba(57,191,255,0) 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(255,255,255,.90),
        0 0 16px rgba(121,221,255,.78),
        0 0 28px rgba(57,191,255,.42) !important;
}


/* Existing Core */

.arsbrain-architecture
.ars-architecture-motion-layer
.ars-architecture-core {
    background:
        radial-gradient(
            circle,
            #fff2c2 0%,
            #d0aa63 28%,
            #79ddff 58%,
            #39bfff 72%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(255,242,194,.95),
        0 0 18px rgba(208,170,99,.70),
        0 0 34px rgba(57,191,255,.50) !important;
}


/* =========================================================
   HOVER — ENGINEERING RESPONSE
   ========================================================= */

.arsbrain-architecture .architecture-card:hover {
    transform:
        perspective(1100px)
        translateY(-8px)
        translateZ(18px)
        rotateX(1deg);

    border-color:
        rgba(121,221,255,.58) !important;

    box-shadow:
        0 30px 65px rgba(0,0,0,.76),
        0 0 30px rgba(57,191,255,.13),
        0 0 42px rgba(137,94,50,.13),
        inset 0 1px 0 rgba(255,242,194,.25) !important;
}

.arsbrain-architecture .architecture-card:hover::after {
    box-shadow:
        0 0 9px rgba(255,255,255,.95),
        0 0 18px rgba(121,221,255,.80),
        0 0 30px rgba(57,191,255,.55);
}

.arsbrain-architecture .architecture-image:hover img {
    transform: scale(1.018);

    filter:
        saturate(.92)
        contrast(1.12)
        brightness(.96) !important;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes arsArchitectureAtmosphere {

    0%,100% {
        transform:
            translate3d(0,0,0)
            scale(.96);

        opacity: .58;
    }

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

        opacity: .90;
    }
}


@keyframes arsArchitectureScan {

    0%, 54% {
        top: -4%;
        opacity: 0;
    }

    62% {
        opacity: .18;
    }

    74% {
        top: 100%;
        opacity: .82;
    }

    82%,100% {
        top: 104%;
        opacity: 0;
    }
}


@keyframes arsArchitectureNode {

    0%,100% {
        opacity: .38;
        transform: scale(.72);
    }

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


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .arsbrain-architecture::after {
        background-size: 38px 38px;
        opacity: .28;
    }

    .arsbrain-architecture
    .architecture-visual {
        backdrop-filter: blur(12px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    }

    .arsbrain-architecture
    .architecture-card {
        backdrop-filter: blur(12px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .arsbrain-architecture::before,
    .arsbrain-architecture::after,
    .arsbrain-architecture
    .architecture-image::after,
    .arsbrain-architecture
    .architecture-card::after {
        animation: none !important;
    }
       }

















/* =========================================================
   ARS ARCHITECTURE — GLASS / INDUSTRIAL BRONZE / BLUE AURA
   ========================================================= */

.arsbrain-architecture .architecture-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;

    background:
        linear-gradient(
            145deg,
            rgba(96,74,45,.34),
            rgba(24,31,42,.48) 45%,
            rgba(8,18,30,.58)
        ) !important;

    border:1px solid rgba(194,145,78,.62) !important;
    border-top:1px solid rgba(226,178,105,.82) !important;

    backdrop-filter:blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(135%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,215,155,.16),
        inset 0 -1px 0 rgba(0,160,255,.08),
        0 14px 35px rgba(0,0,0,.52) !important;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease !important;
}

/* REAL ELECTRIC BLUE AURA BEHIND CARD */
.arsbrain-architecture .architecture-card::before{
    content:"";
    position:absolute;
    z-index:-2;

    left:8%;
    right:8%;
    bottom:-34px;
    height:75px;

    background:
        radial-gradient(
            ellipse,
            rgba(0,188,255,.55) 0%,
            rgba(0,145,255,.30) 35%,
            rgba(0,100,255,.10) 62%,
            transparent 78%
        );

    filter:blur(20px);
    opacity:.95;
    pointer-events:none;
}

/* GLASS REFLECTION */
.arsbrain-architecture .architecture-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            transparent 15%,
            rgba(255,255,255,.075) 42%,
            rgba(215,168,100,.10) 50%,
            transparent 65%
        );

    opacity:.75;
}

/* CONTENT ABOVE EFFECTS */
.arsbrain-architecture .architecture-card > *{
    position:relative;
    z-index:3;
}

/* INDUSTRIAL BRONZE TITLE */
.arsbrain-architecture .architecture-card h3{
    color:#d6a361 !important;

    text-shadow:
        0 0 8px rgba(210,157,82,.18),
        0 1px 2px rgba(0,0,0,.8) !important;
}

/* ELECTRIC BLUE SIGNATURE */
.arsbrain-architecture .architecture-card h3::after{
    content:"";
    display:block;

    width:46px;
    height:2px;
    margin-top:11px;

    background:linear-gradient(
        90deg,
        rgba(0,207,255,.95),
        rgba(0,133,255,.30),
        transparent
    );

    box-shadow:
        0 0 7px rgba(0,207,255,.85),
        0 0 18px rgba(0,155,255,.48);
}

/* HOVER */
.arsbrain-architecture .architecture-card:hover{
    transform:translateY(-8px) !important;

    border-color:rgba(222,174,103,.95) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,220,170,.22),
        0 18px 45px rgba(0,0,0,.62),
        0 0 30px rgba(0,178,255,.22),
        0 28px 65px rgba(0,145,255,.18) !important;
}

.arsbrain-architecture .architecture-card:hover::before{
    opacity:1.35;
    filter:blur(23px);
}




































/* =========================================================
   ARS PRODUCT FAMILY
   PREMIUM GLASS / VISUAL LOGO CHAMBERS
   ========================================================= */

/* SECTION HEADER */
.arsbrain-family .section-heading .section-label{
    color:#3ec7ff !important;

    text-shadow:
        0 0 8px rgba(0,190,255,.45),
        0 0 22px rgba(0,150,255,.22) !important;
}

.arsbrain-family .section-heading h2{
    color:#48caff !important;

    text-shadow:
        0 0 10px rgba(0,190,255,.35),
        0 0 28px rgba(0,130,255,.18) !important;
}

/* GOLD LIGHT LINE UNDER HEADER */
.arsbrain-family .section-heading h2::after{
    content:"";
    display:block;

    width:110px;
    height:2px;

    margin:18px auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        #b98a4b,
        #f0c77b,
        #b98a4b,
        transparent
    );

    box-shadow:
        0 0 7px rgba(218,171,94,.75),
        0 0 20px rgba(194,142,65,.35);
}

/* FAMILY CARD */
.arsbrain-family .family-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    min-height:390px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(20,32,48,.48) 42%,
            rgba(4,14,25,.68)
        ) !important;

    border:1px solid rgba(198,153,88,.42) !important;
    border-top:1px solid rgba(232,190,122,.70) !important;

    border-radius:24px !important;

    backdrop-filter:
        blur(24px)
        saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,180,255,.10),
        0 18px 45px rgba(0,0,0,.48) !important;

    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease !important;
}

/* BLUE ATMOSPHERE BEHIND CARD */
.arsbrain-family .family-card::before{
    content:"";
    position:absolute;
    z-index:-2;

    width:75%;
    height:45%;

    left:12%;
    bottom:-20%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,190,255,.30),
            rgba(0,120,255,.12) 45%,
            transparent 75%
        );

    filter:blur(28px);
}

/* GLASS REFLECTION */
.arsbrain-family .family-card::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 10%,
            rgba(255,255,255,.07) 38%,
            rgba(214,169,100,.08) 48%,
            transparent 64%
        );

    pointer-events:none;
}

/* VISUAL CHAMBER */
.arsbrain-family .family-visual{
    position:relative;

    height:205px;
    margin:14px;

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

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(8,23,39,.34)
        );

    border:1px solid rgba(205,160,92,.25);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 25px rgba(0,155,255,.08);
}

/* IMAGE GLOW */
.arsbrain-family .family-visual-glow{
    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,190,255,.24),
            transparent 68%
        );

    filter:blur(12px);
}

/* LOGO / IMAGE SLOT */
.arsbrain-family .family-logo-slot{
    position:relative;
    z-index:4;

    width:150px;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.arsbrain-family .family-logo-slot img{
    width:100%;
    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(0 0 8px rgba(0,190,255,.28))
        drop-shadow(0 10px 18px rgba(0,0,0,.55));

    transition:
        transform .5s ease,
        filter .5s ease;
}

/* CONTENT */
.arsbrain-family .family-content{
    position:relative;
    z-index:5;

    padding:4px 25px 28px;
}

.arsbrain-family .family-content h3{
    color:#d6a461 !important;

    font-size:1.25rem;

    text-shadow:
        0 0 10px rgba(213,163,94,.16);
}

.arsbrain-family .family-content p{
    color:rgba(224,225,226,.76) !important;
    line-height:1.75;
}

/* BLUE LINE UNDER PRODUCT TITLE */
.arsbrain-family .family-content h3::after{
    content:"";

    display:block;

    width:38px;
    height:2px;

    margin-top:10px;

    background:
        linear-gradient(
            90deg,
            #00c8ff,
            rgba(0,170,255,.18),
            transparent
        );

    box-shadow:
        0 0 8px rgba(0,195,255,.8),
        0 0 18px rgba(0,150,255,.38);
}

/* HOVER */
.arsbrain-family .family-card:hover{
    transform:translateY(-9px);

    border-color:rgba(224,175,103,.72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 22px 55px rgba(0,0,0,.58),
        0 0 30px rgba(0,174,255,.18),
        0 30px 70px rgba(0,145,255,.15) !important;
}

.arsbrain-family .family-card:hover .family-logo-slot img{
    transform:scale(1.08);

    filter:
        drop-shadow(0 0 13px rgba(0,205,255,.48))
        drop-shadow(0 14px 25px rgba(0,0,0,.60));
}


































/* =========================================================
   ARS — EXPLORE ECOSYSTEM
   PREMIUM COMMAND INTERFACE
   GLASS / MATTE NAVY / BRONZE / ELECTRIC BLUE
   ========================================================= */

.explore-platforms{
    position:relative;
    isolation:isolate;
    padding-top:110px;
    padding-bottom:120px;
    overflow:hidden;
}

/* =========================================================
   AMBIENT LIGHT FIELD
   ========================================================= */

.explore-platforms::before{
    content:"";
    position:absolute;
    z-index:-3;

    width:720px;
    height:420px;

    left:50%;
    top:42%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(0,170,255,.13) 0%,
            rgba(0,110,255,.07) 34%,
            transparent 72%
        );

    filter:blur(35px);
    pointer-events:none;
}

.explore-platforms::after{
    content:"";
    position:absolute;
    z-index:-2;

    width:520px;
    height:2px;

    left:50%;
    top:49%;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,190,255,.45),
            rgba(225,174,92,.65),
            rgba(0,190,255,.45),
            transparent
        );

    filter:blur(2px);

    box-shadow:
        0 0 18px rgba(0,170,255,.35);
}


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

.explore-platforms .section-heading{
    position:relative;
    text-align:center;
    margin-bottom:48px;
}

.explore-platforms .section-label{
    display:inline-block;

    color:#35c7ff !important;

    font-size:.72rem;
    font-weight:700;
    letter-spacing:.28em;

    text-shadow:
        0 0 8px rgba(0,190,255,.45),
        0 0 20px rgba(0,150,255,.22);
}

.explore-platforms .section-heading h2{
    position:relative;

    margin-top:12px;

    color:#55ceff !important;

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

    letter-spacing:-.025em;

    text-shadow:
        0 0 10px rgba(0,190,255,.32),
        0 0 28px rgba(0,125,255,.18);
}

/* GOLD ENGINEERING LINE */
.explore-platforms .section-heading h2::after{
    content:"";

    display:block;

    width:125px;
    height:2px;

    margin:20px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9d7137 12%,
            #e8bd77 50%,
            #9d7137 88%,
            transparent
        );

    box-shadow:
        0 0 6px rgba(218,171,95,.9),
        0 0 20px rgba(190,140,60,.38);
}

.explore-platforms .section-heading p{
    max-width:760px;
    margin:22px auto 0;

    color:rgba(220,225,231,.68) !important;

    line-height:1.8;
}


/* =========================================================
   MAIN GLASS COMMAND PANEL
   ========================================================= */

.explore-platforms .ecosystem-panel{
    position:relative;
    isolation:isolate;

    max-width:1120px;

    margin:0 auto;

    padding:34px;

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(13,28,44,.54) 45%,
            rgba(4,14,25,.72)
        ) !important;

    border:1px solid rgba(186,143,82,.42) !important;

    backdrop-filter:
        blur(28px)
        saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(145%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,175,255,.10),
        0 25px 70px rgba(0,0,0,.52),
        0 0 45px rgba(0,140,255,.08);
}

/* TOP GLASS REFLECTION */
.explore-platforms .ecosystem-panel::before{
    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            115deg,
            transparent 8%,
            rgba(255,255,255,.075) 37%,
            rgba(214,169,99,.08) 48%,
            transparent 63%
        );

    pointer-events:none;
}

/* BLUE UNDERGLOW */
.explore-platforms .ecosystem-panel::after{
    content:"";

    position:absolute;
    z-index:-1;

    left:8%;
    right:8%;
    bottom:-32px;

    height:70px;

    background:
        radial-gradient(
            ellipse,
            rgba(0,184,255,.38),
            rgba(0,120,255,.12) 45%,
            transparent 75%
        );

    filter:blur(22px);
}


/* =========================================================
   BUTTON GRID
   ========================================================= */

.explore-platforms .ecosystem-buttons{
    position:relative;
    z-index:3;

    display:grid;

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

    gap:16px;
}


/* =========================================================
   ECOSYSTEM BUTTON
   ========================================================= */

.explore-platforms .ecosystem-btn{
    position:relative;
    isolation:isolate;

    min-height:78px;

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

    padding:18px 22px;

    overflow:hidden;

    border-radius:18px;

    text-decoration:none !important;

    color:#d4a361 !important;

    font-size:.94rem;
    font-weight:650;
    letter-spacing:.02em;

    background:
        linear-gradient(
            145deg,
            rgba(105,80,48,.22),
            rgba(17,31,46,.48) 55%,
            rgba(4,15,27,.58)
        ) !important;

    border:1px solid rgba(195,150,87,.40) !important;

    backdrop-filter:
        blur(16px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,180,255,.07),
        0 10px 25px rgba(0,0,0,.28);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}


/* BLUE LIGHT CORE INSIDE BUTTON */
.explore-platforms .ecosystem-btn::before{
    content:"";

    position:absolute;
    z-index:-1;

    width:140px;
    height:100px;

    left:50%;
    top:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.10),
            transparent 70%
        );

    filter:blur(14px);

    opacity:.55;

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


/* GOLD LIGHT EDGE */
.explore-platforms .ecosystem-btn::after{
    content:"";

    position:absolute;

    left:12%;
    right:12%;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,163,92,.70),
            transparent
        );

    box-shadow:
        0 0 8px rgba(214,163,92,.32);
}


/* =========================================================
   HOVER
   ========================================================= */

.explore-platforms .ecosystem-btn:hover{
    transform:
        translateY(-6px)
        scale(1.025);

    color:#5ed2ff !important;

    border-color:
        rgba(0,196,255,.70) !important;

    background:
        linear-gradient(
            145deg,
            rgba(103,80,50,.30),
            rgba(14,38,57,.58),
            rgba(4,18,32,.68)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 14px 32px rgba(0,0,0,.40),
        0 0 22px rgba(0,175,255,.18),
        0 18px 45px rgba(0,145,255,.12);
}

.explore-platforms .ecosystem-btn:hover::before{
    opacity:1;

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


/* =========================================================
   ACTIVE / FOCUS
   ========================================================= */

.explore-platforms .ecosystem-btn:focus-visible{
    outline:none;

    border-color:
        rgba(0,204,255,.9) !important;

    box-shadow:
        0 0 0 2px rgba(0,190,255,.16),
        0 0 28px rgba(0,180,255,.30);
}


/* =========================================================
   ECOSYSTEM NOTE
   ========================================================= */

.explore-platforms .ecosystem-note{
    position:relative;

    max-width:900px;

    margin:28px auto 0;

    padding:34px 40px;

    text-align:center;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(12,27,42,.38)
        ) !important;

    border:1px solid rgba(169,130,77,.28) !important;

    backdrop-filter:blur(18px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 15px 35px rgba(0,0,0,.28);
}

.explore-platforms .ecosystem-note h2{
    color:#55ccff !important;

    font-size:1.55rem;

    text-shadow:
        0 0 10px rgba(0,185,255,.28);
}

.explore-platforms .ecosystem-note h2::after{
    content:"";

    display:block;

    width:70px;
    height:1px;

    margin:13px auto 16px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4a05c,
            transparent
        );

    box-shadow:
        0 0 8px rgba(212,160,92,.55);
}

.explore-platforms .ecosystem-note p{
    max-width:760px;

    margin:0 auto;

    color:rgba(220,224,229,.67) !important;

    line-height:1.8;
}


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

@media(max-width:800px){

    .explore-platforms{
        padding-top:75px;
        padding-bottom:80px;
    }

    .explore-platforms .ecosystem-panel{
        padding:20px;
        border-radius:24px;
    }

    .explore-platforms .ecosystem-buttons{
        grid-template-columns:1fr;
        gap:12px;
    }

    .explore-platforms .ecosystem-btn{
        min-height:68px;
    }

    .explore-platforms .ecosystem-note{
        padding:28px 22px;
    }
}

































/* =========================================================
   ARS BRAIN PLATFORM
   PREMIUM ENGINEERING PLATFORM SYSTEM
   ========================================================= */

.arsbrain-platform {
    --platform-gold: #c9a45c;
    --platform-gold-light: #f0d28b;
    --platform-bronze: #9a6740;
    --platform-blue: #39bfff;
    --platform-cyan: #79ddff;
    --platform-navy: #07121b;
    --platform-black: #03070b;

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100svh;
    padding: 120px 0 140px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(57,191,255,.075) 0%,
            transparent 35%
        ),
        radial-gradient(
            ellipse at 18% 58%,
            rgba(154,103,64,.075) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 82% 42%,
            rgba(201,164,92,.055) 0%,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020509 0%,
            #061018 45%,
            #03080d 100%
        );
}


/* ---------------------------------------------------------
   ENGINEERING ATMOSPHERE
   --------------------------------------------------------- */

.arsbrain-platform::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.025) 48%,
            rgba(201,164,92,.035) 50%,
            transparent 100%
        ),
        linear-gradient(
            0deg,
            rgba(57,191,255,.025) 1px,
            transparent 1px
        );

    background-size:
        100% 100%,
        100% 90px;

    opacity: .65;
}


/* ---------------------------------------------------------
   CENTRAL ENGINEERING LIGHT
   --------------------------------------------------------- */

.arsbrain-platform::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    width: 760px;
    height: 420px;

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

    background:
        radial-gradient(
            ellipse at center,
            rgba(57,191,255,.09) 0%,
            rgba(201,164,92,.045) 30%,
            rgba(154,103,64,.025) 50%,
            transparent 74%
        );

    filter: blur(18px);
    pointer-events: none;
    z-index: -1;

    animation: arsPlatformAtmosphere 12s ease-in-out infinite;
}

@keyframes arsPlatformAtmosphere {
    0%,100% {
        opacity: .65;
        transform: translate(-50%, -50%) scale(.96);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
}


/* =========================================================
   HEADING
   ========================================================= */

.arsbrain-platform .section-heading {
    position: relative;
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
    z-index: 5;
}

.arsbrain-platform .section-heading::after {
    content: "";
    display: block;
    width: 150px;
    height: 1px;
    margin: 28px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(154,103,64,.65),
            rgba(201,164,92,1),
            rgba(255,240,189,1),
            rgba(57,191,255,.75),
            transparent
        );

    box-shadow:
        0 0 10px rgba(201,164,92,.32),
        0 0 22px rgba(57,191,255,.12);
}

.arsbrain-platform .section-label {
    color: var(--platform-gold-light);
    letter-spacing: .28em;
    font-size: 10px;
    text-shadow:
        0 0 12px rgba(201,164,92,.25);
}

.arsbrain-platform .section-heading h2 {
    margin-top: 16px;
    color: #fff;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 500;

    text-shadow:
        0 0 18px rgba(255,255,255,.08),
        0 0 38px rgba(201,164,92,.08);
}

.arsbrain-platform .section-heading p {
    max-width: 760px;
    margin: 22px auto 0;

    color: rgba(220,232,240,.68);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   MAIN PLATFORM LAYOUT
   ========================================================= */

.arsbrain-platform .platform-layout {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);

    gap: 30px;

    align-items: stretch;

    margin-bottom: 32px;
}


/* ---------------------------------------------------------
   PLATFORM VISUAL
   --------------------------------------------------------- */

.arsbrain-platform .platform-visual {
    position: relative;
    min-height: 510px;

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

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(154,103,64,.13),
            rgba(7,15,22,.88) 38%,
            rgba(5,14,21,.94) 70%,
            rgba(57,191,255,.07)
        );

    border:
        1px solid rgba(201,164,92,.25);

    box-shadow:
        0 25px 65px rgba(0,0,0,.48),
        0 0 35px rgba(201,164,92,.06),
        0 0 55px rgba(57,191,255,.035),
        inset 0 1px 0 rgba(255,240,189,.12),
        inset 0 0 60px rgba(57,191,255,.025);

    transform-style: preserve-3d;
}

.arsbrain-platform .platform-visual::before {
    content: "";
    position: absolute;
    inset: 12px;

    border:
        1px solid rgba(57,191,255,.10);

    border-radius: 17px;

    pointer-events: none;
}

.arsbrain-platform .platform-visual::after {
    content: "";
    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(154,103,64,.45),
            rgba(201,164,92,.9),
            rgba(255,240,189,1),
            rgba(57,191,255,.75),
            transparent
        );

    box-shadow:
        0 0 9px rgba(201,164,92,.42),
        0 0 22px rgba(57,191,255,.10);

    animation: arsPlatformTopLine 5s ease-in-out infinite;
}

@keyframes arsPlatformTopLine {
    0%,100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   PLATFORM IMAGE
   --------------------------------------------------------- */

.arsbrain-platform .platform-visual img {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 510px;

    object-fit: contain;

    padding: 30px;

    opacity: .92;

    filter:
        saturate(.88)
        contrast(1.06)
        brightness(1.03)
        drop-shadow(0 0 18px rgba(57,191,255,.08))
        drop-shadow(0 0 28px rgba(201,164,92,.07));

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

.arsbrain-platform .platform-visual:hover img {
    transform: scale(1.035);

    filter:
        saturate(1)
        contrast(1.08)
        brightness(1.06)
        drop-shadow(0 0 22px rgba(57,191,255,.13))
        drop-shadow(0 0 35px rgba(201,164,92,.10));
}


/* =========================================================
   PLATFORM CONTENT
   ========================================================= */

.arsbrain-platform .platform-content {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
}


/* ---------------------------------------------------------
   ENGINEERING CARDS
   --------------------------------------------------------- */

.arsbrain-platform .platform-card {
    position: relative;

    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 28px 30px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            rgba(154,103,64,.12) 0%,
            rgba(9,17,24,.82) 38%,
            rgba(7,14,20,.88) 68%,
            rgba(57,191,255,.055) 100%
        );

    border:
        1px solid rgba(201,164,92,.20);

    box-shadow:
        0 14px 35px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,240,189,.09),
        inset 0 0 28px rgba(57,191,255,.018);

    transform:
        translateZ(0);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}


/* gold engineering edge */

.arsbrain-platform .platform-card::before {
    content: "";

    position: absolute;

    left: 22px;
    right: 22px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,164,92,.65),
            rgba(240,210,139,.95),
            transparent
        );

    box-shadow:
        0 0 8px rgba(201,164,92,.28);

    opacity: .55;
}


/* blue engineering side */

.arsbrain-platform .platform-card::after {
    content: "";

    position: absolute;

    top: 18%;
    right: 0;

    width: 1px;
    height: 64%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(57,191,255,.65),
            transparent
        );

    box-shadow:
        0 0 9px rgba(57,191,255,.22);

    opacity: .45;
}

.arsbrain-platform .platform-card:hover {
    transform:
        translateY(-5px)
        translateZ(12px);

    border-color:
        rgba(228,189,104,.42);

    background:
        linear-gradient(
            110deg,
            rgba(154,103,64,.17),
            rgba(9,18,26,.90) 42%,
            rgba(8,16,23,.94) 70%,
            rgba(57,191,255,.08)
        );

    box-shadow:
        0 20px 42px rgba(0,0,0,.42),
        0 0 28px rgba(201,164,92,.08),
        0 0 35px rgba(57,191,255,.045),
        inset 0 1px 0 rgba(255,240,189,.14);
}

.arsbrain-platform .platform-card h3 {
    margin: 0 0 11px;

    color: #f5f1e8;

    font-size: 17px;
    font-weight: 500;

    letter-spacing: .01em;

    text-shadow:
        0 0 12px rgba(255,255,255,.06);
}

.arsbrain-platform .platform-card p {
    margin: 0;

    color: rgba(204,218,228,.64);

    font-size: 12.5px;
    line-height: 1.8;
}


/* =========================================================
   FEATURE STRIP
   ========================================================= */

.arsbrain-platform .feature-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 135px;

    padding: 28px 30px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            rgba(9,16,22,.92),
            rgba(10,20,27,.84),
            rgba(7,15,21,.90)
        );

    border:
        1px solid rgba(57,191,255,.16);

    box-shadow:
        0 15px 35px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 30px rgba(57,191,255,.018);

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


/* subtle data rail */

.arsbrain-platform .feature-card::before {
    content: "";

    position: absolute;

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

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(57,191,255,.9),
            rgba(201,164,92,.75),
            transparent
        );

    box-shadow:
        0 0 12px rgba(57,191,255,.22);

    opacity: .7;
}

.arsbrain-platform .feature-card::after {
    content: "";

    position: absolute;

    left: 24%;
    right: 24%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.5),
            transparent
        );

    opacity: .5;
}

.arsbrain-platform .feature-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(57,191,255,.32);

    box-shadow:
        0 20px 42px rgba(0,0,0,.40),
        0 0 28px rgba(57,191,255,.06),
        inset 0 1px 0 rgba(121,221,255,.10);
}

.arsbrain-platform .feature-card h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 16px;
    font-weight: 500;
}

.arsbrain-platform .feature-card p {
    margin: 0;

    color: rgba(201,215,225,.60);

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   HIGHLIGHT / PLATFORM STATEMENT
   ========================================================= */

.arsbrain-platform .platform-highlight {
    position: relative;

    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 50px;

    align-items: center;

    margin-top: 32px;

    padding: 52px 55px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            105deg,
            rgba(154,103,64,.16) 0%,
            rgba(8,16,23,.94) 36%,
            rgba(6,14,21,.94) 66%,
            rgba(57,191,255,.075) 100%
        );

    border:
        1px solid rgba(201,164,92,.28);

    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 45px rgba(201,164,92,.06),
        0 0 55px rgba(57,191,255,.035),
        inset 0 1px 0 rgba(255,240,189,.11);
}


/* central energy rail */

.arsbrain-platform .platform-highlight::before {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(154,103,64,.45),
            rgba(201,164,92,.95),
            rgba(255,240,189,1),
            rgba(57,191,255,.8),
            transparent
        );

    box-shadow:
        0 0 10px rgba(201,164,92,.45),
        0 0 22px rgba(57,191,255,.12);
}

.arsbrain-platform .highlight-content {
    position: relative;
    z-index: 2;
}

.arsbrain-platform .highlight-content h2 {
    margin: 0 0 18px;

    max-width: 620px;

    color: #fff;

    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.12;

    font-weight: 500;
    letter-spacing: -.02em;

    text-shadow:
        0 0 22px rgba(255,255,255,.07),
        0 0 40px rgba(201,164,92,.08);
}

.arsbrain-platform .highlight-content p {
    max-width: 650px;

    margin: 0;

    color: rgba(211,224,232,.66);

    font-size: 13px;
    line-height: 1.9;
}


/* =========================================================
   HIGHLIGHT STATS
   ========================================================= */

.arsbrain-platform .highlight-stats {
    position: relative;

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

    gap: 1px;

    background:
        rgba(201,164,92,.13);

    border:
        1px solid rgba(201,164,92,.13);
}

.arsbrain-platform .highlight-item {
    position: relative;

    min-height: 115px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(12,21,28,.94),
            rgba(5,12,18,.96)
        );

    overflow: hidden;
}

.arsbrain-platform .highlight-item::after {
    content: "";

    position: absolute;

    left: 25%;
    right: 25%;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.55),
            transparent
        );

    opacity: .5;
}

.arsbrain-platform .highlight-item h2 {
    margin: 0;

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

    font-size: 30px;
    line-height: 1;

    font-weight: 500;

    text-shadow:
        0 0 14px rgba(201,164,92,.28);
}

.arsbrain-platform .highlight-item span {
    margin-top: 9px;

    color: rgba(220,231,238,.58);

    font-size: 9px;

    letter-spacing: .16em;
    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .arsbrain-platform {
        padding: 95px 0 110px;
    }

    .arsbrain-platform .platform-layout {
        grid-template-columns: 1fr;
    }

    .arsbrain-platform .platform-visual {
        min-height: 430px;
    }

    .arsbrain-platform .platform-content {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: none;
    }

    .arsbrain-platform .platform-card {
        min-height: 190px;
    }

    .arsbrain-platform .platform-highlight {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .arsbrain-platform {
        min-height: auto;
        padding: 80px 0 90px;
    }

    .arsbrain-platform .section-heading {
        margin-bottom: 48px;
    }

    .arsbrain-platform .section-heading h2 {
        font-size: 32px;
    }

    .arsbrain-platform .section-heading p {
        padding: 0 12px;
        font-size: 12px;
        line-height: 1.8;
    }

    .arsbrain-platform .platform-layout {
        gap: 18px;
        margin-bottom: 18px;
    }

    .arsbrain-platform .platform-visual {
        min-height: 310px;
        border-radius: 18px;
    }

    .arsbrain-platform .platform-visual img {
        max-height: 310px;
        padding: 18px;
    }

    .arsbrain-platform .platform-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .arsbrain-platform .platform-card {
        min-height: 0;
        padding: 23px 22px;
        border-radius: 15px;
    }

    .arsbrain-platform .platform-card h3 {
        font-size: 15px;
    }

    .arsbrain-platform .platform-card p {
        font-size: 11.5px;
    }

    .arsbrain-platform .feature-card {
        min-height: 120px;
        padding: 23px 24px;
        border-radius: 15px;
    }

    .arsbrain-platform .platform-highlight {
        margin-top: 22px;
        padding: 32px 22px;
        border-radius: 18px;
        gap: 28px;
    }

    .arsbrain-platform .highlight-content h2 {
        font-size: 28px;
    }

    .arsbrain-platform .highlight-content p {
        font-size: 11.5px;
    }

    .arsbrain-platform .highlight-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .arsbrain-platform .highlight-item {
        min-height: 100px;
    }

    .arsbrain-platform .highlight-item h2 {
        font-size: 25px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .arsbrain-platform *,
    .arsbrain-platform::after {
        animation: none !important;
        transition: none !important;
    }
}








/* =========================================================
   ARS BRAIN PLATFORM — ARS SIGNATURE COLOR PATCH
   MATTE BRONZE × ELECTRIC BLUE
   ========================================================= */

.arsbrain-platform .section-label {
    color: #B98255 !important;
    text-shadow:
        0 0 8px rgba(185,130,85,.28),
        0 0 18px rgba(57,191,255,.06) !important;
}

.arsbrain-platform .section-heading h2 {
    color: #B98255 !important;

    text-shadow:
        0 0 10px rgba(185,130,85,.20),
        0 0 24px rgba(185,130,85,.10),
        0 0 38px rgba(57,191,255,.06) !important;
}

.arsbrain-platform .section-heading::after {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(143,96,63,.55) 20%,
            rgba(185,130,85,.95) 38%,
            rgba(201,164,92,.65) 50%,
            rgba(57,191,255,.95) 68%,
            rgba(57,191,255,.55) 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(185,130,85,.30),
        0 0 18px rgba(57,191,255,.18) !important;
}

/* Bronze = Heritage / Identity
   Electric Blue = Intelligence / Technology */

.arsbrain-platform .platform-card h3 {
    color: #E8C39A !important;
}

.arsbrain-platform .feature-card h3 {
    color: #79DDFF !important;
}

.arsbrain-platform .highlight-content h2 {
    color: #B98255 !important;

    text-shadow:
        0 0 12px rgba(185,130,85,.20),
        0 0 28px rgba(57,191,255,.07) !important;
}

.arsbrain-platform .highlight-item h2 {
    color: #79DDFF !important;

    text-shadow:
        0 0 10px rgba(57,191,255,.25),
        0 0 20px rgba(57,191,255,.10) !important;
}


























/* =========================================================
   ARS HAVEN — SIGNATURE VISUAL SYSTEM
   MATTE BRONZE × ELECTRIC BLUE
   Human-Centered Intelligence
   ========================================================= */

.ars-haven {
    --haven-bronze: #B98255;
    --haven-bronze-deep: #8F603F;
    --haven-bronze-light: #E8C39A;

    --haven-blue: #39BFFF;
    --haven-cyan: #79DDFF;

    --haven-navy: #06121B;
    --haven-black: #03070B;

    --haven-gold: #C9A45C;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(185,130,85,.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 30%,
            rgba(57,191,255,.09),
            transparent 36%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(143,96,63,.07),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #03070B 0%,
            #06121B 48%,
            #04090F 100%
        );
}


/* =========================================================
   GLOBAL HAVEN HEADINGS
   ========================================================= */

.ars-haven .section-heading h2,
.ars-haven .haven-philosophy h2,
.ars-haven .haven-roadmap h2,
.ars-haven .haven-status h2,
.ars-haven .haven-story-content h2,
.ars-haven .haven-ecosystem-content h2 {

    color: var(--haven-bronze-light) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.25),
        0 0 20px rgba(185,130,85,.14),
        0 0 38px rgba(57,191,255,.07) !important;

    letter-spacing: -.025em;
}


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

.ars-haven .section-label {

    color: var(--haven-bronze) !important;

    letter-spacing: .20em;

    text-shadow:
        0 0 7px rgba(185,130,85,.35),
        0 0 18px rgba(57,191,255,.08) !important;
}


/* =========================================================
   HEADING SIGNAL LINE
   ========================================================= */

.ars-haven .section-heading::after {

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(143,96,63,.35) 15%,
            rgba(185,130,85,.90) 34%,
            rgba(232,195,154,.95) 46%,
            rgba(57,191,255,.95) 65%,
            rgba(57,191,255,.48) 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(185,130,85,.28),
        0 0 18px rgba(57,191,255,.16) !important;
}


/* =========================================================
   MAIN HAVEN HERO
   ========================================================= */

.ars-haven .haven-hero {

    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

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

    align-items: center;
}


/* =========================================================
   HERO IMAGE CHAMBER
   ========================================================= */

.ars-haven .haven-image {

    position: relative;
    overflow: hidden;

    min-height: 420px;

    border: 1px solid rgba(185,130,85,.24);

    background:
        linear-gradient(
            135deg,
            rgba(185,130,85,.08),
            rgba(57,191,255,.045) 52%,
            rgba(3,7,11,.78)
        );

    box-shadow:
        0 0 22px rgba(185,130,85,.10),
        0 0 55px rgba(57,191,255,.06),
        inset 0 1px 0 rgba(232,195,154,.16);
}

.ars-haven .haven-image::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(185,130,85,.10) 42%,
            transparent 54%,
            rgba(57,191,255,.08) 78%,
            transparent 100%
        );

    pointer-events: none;
}

.ars-haven .haven-image img {

    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        saturate(.92)
        contrast(1.06)
        brightness(.98);

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

.ars-haven .haven-image:hover img {

    transform: scale(1.025);

    filter:
        saturate(1)
        contrast(1.08)
        brightness(1.03);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.ars-haven .haven-content h3 {

    color: var(--haven-bronze-light) !important;

    text-shadow:
        0 0 9px rgba(185,130,85,.18),
        0 0 22px rgba(57,191,255,.06);
}

.ars-haven .haven-content p {

    color: rgba(220,228,234,.78);
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.ars-haven .haven-philosophy {

    position: relative;

    border: 1px solid rgba(185,130,85,.20);

    background:
        linear-gradient(
            115deg,
            rgba(185,130,85,.085),
            rgba(8,18,27,.72) 48%,
            rgba(57,191,255,.055)
        );

    box-shadow:
        0 0 28px rgba(185,130,85,.07),
        0 0 55px rgba(57,191,255,.04),
        inset 0 1px 0 rgba(232,195,154,.12);
}

.ars-haven .haven-philosophy::before {

    content: "";

    position: absolute;

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

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--haven-bronze),
            var(--haven-blue),
            transparent
        );

    opacity: .75;
}


/* =========================================================
   NEW — HUMAN-CENTERED INTELLIGENCE
   ========================================================= */

.ars-haven .haven-story-visual {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    gap: clamp(28px, 5vw, 70px);

    align-items: center;

    margin: clamp(55px, 7vw, 100px) 0;

    padding: clamp(18px, 3vw, 32px);

    border: 1px solid rgba(185,130,85,.20);

    background:
        linear-gradient(
            120deg,
            rgba(185,130,85,.075),
            rgba(7,17,25,.76) 50%,
            rgba(57,191,255,.055)
        );

    box-shadow:
        0 0 25px rgba(185,130,85,.07),
        0 0 65px rgba(57,191,255,.035),
        inset 0 1px 0 rgba(232,195,154,.12);
}

.ars-haven .haven-story-image {

    position: relative;

    min-height: 330px;

    overflow: hidden;

    display: flex;

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

.ars-haven .haven-story-image::after {

    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(3,7,11,.18) 100%
        );

    pointer-events: none;
}

.ars-haven .haven-story-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        saturate(.94)
        contrast(1.05)
        brightness(1.01);

    transition: transform .8s ease;
}

.ars-haven .haven-story-visual:hover
.haven-story-image img {

    transform: scale(1.025);
}

.ars-haven .haven-story-content h2 {

    margin-top: 12px;
}

.ars-haven .haven-story-content p {

    color: rgba(220,228,234,.78);
    line-height: 1.9;
}


/* =========================================================
   STORY SIGNAL
   ========================================================= */

.ars-haven .haven-story-line {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    color: var(--haven-cyan);

    font-size: .68rem;

    letter-spacing: .16em;
}

.ars-haven .haven-story-line i {

    width: 26px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(185,130,85,.8),
            rgba(57,191,255,.8)
        );

    box-shadow:
        0 0 8px rgba(57,191,255,.18);
}


/* =========================================================
   CORE VALUES
   ========================================================= */

.ars-haven .haven-card {

    position: relative;

    border: 1px solid rgba(185,130,85,.18);

    background:
        linear-gradient(
            145deg,
            rgba(185,130,85,.065),
            rgba(8,17,24,.78) 55%,
            rgba(57,191,255,.045)
        );

    box-shadow:
        0 0 18px rgba(185,130,85,.055),
        inset 0 1px 0 rgba(232,195,154,.09);

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

.ars-haven .haven-card:hover {

    transform: translateY(-5px);

    border-color: rgba(185,130,85,.40);

    box-shadow:
        0 0 24px rgba(185,130,85,.12),
        0 0 42px rgba(57,191,255,.06),
        inset 0 1px 0 rgba(232,195,154,.16);
}

.ars-haven .haven-card h3 {

    color: var(--haven-bronze-light) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.18);
}

.ars-haven .haven-icon {

    color: var(--haven-blue);

    text-shadow:
        0 0 10px rgba(57,191,255,.30),
        0 0 22px rgba(57,191,255,.12);
}


/* =========================================================
   NEW — THE HAVEN ECOSYSTEM
   ========================================================= */

.ars-haven .haven-ecosystem-visual {

    display: grid;

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

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

    align-items: center;

    margin: clamp(55px, 7vw, 100px) 0;

    padding: clamp(18px, 3vw, 34px);

    border: 1px solid rgba(57,191,255,.18);

    background:
        linear-gradient(
            110deg,
            rgba(57,191,255,.045),
            rgba(7,17,25,.78) 48%,
            rgba(185,130,85,.07)
        );

    box-shadow:
        0 0 28px rgba(57,191,255,.055),
        0 0 60px rgba(185,130,85,.035),
        inset 0 1px 0 rgba(121,221,255,.10);
}

.ars-haven .haven-ecosystem-image {

    min-height: 330px;

    display: flex;

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

    overflow: hidden;
}

.ars-haven .haven-ecosystem-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        saturate(.96)
        contrast(1.05)
        brightness(1.02);

    transition: transform .8s ease;
}

.ars-haven .haven-ecosystem-visual:hover
.haven-ecosystem-image img {

    transform: scale(1.025);
}

.ars-haven .haven-ecosystem-content h2 {

    color: var(--haven-bronze-light) !important;
}

.ars-haven .haven-ecosystem-content p {

    color: rgba(220,228,234,.78);

    line-height: 1.9;
}


/* =========================================================
   ECOSYSTEM DATA
   ========================================================= */

.ars-haven .haven-ecosystem-data {

    display: grid;

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

    gap: 14px;

    margin-top: 28px;
}

.ars-haven .haven-ecosystem-data div {

    padding: 13px 15px;

    border-left: 1px solid rgba(185,130,85,.55);

    background:
        linear-gradient(
            90deg,
            rgba(185,130,85,.065),
            rgba(57,191,255,.025),
            transparent
        );
}

.ars-haven .haven-ecosystem-data strong {

    display: block;

    color: var(--haven-blue);

    font-size: .78rem;

    letter-spacing: .14em;
}

.ars-haven .haven-ecosystem-data span {

    display: block;

    margin-top: 4px;

    color: rgba(232,195,154,.82);

    font-size: .62rem;

    letter-spacing: .13em;
}


/* =========================================================
   ROADMAP
   ========================================================= */

.ars-haven .haven-roadmap {

    position: relative;

    border: 1px solid rgba(57,191,255,.16);

    background:
        linear-gradient(
            120deg,
            rgba(57,191,255,.045),
            rgba(7,17,25,.78),
            rgba(185,130,85,.045)
        );

    box-shadow:
        0 0 25px rgba(57,191,255,.04),
        inset 0 1px 0 rgba(121,221,255,.08);
}

.ars-haven .haven-roadmap h2 {

    color: var(--haven-bronze-light) !important;
}


/* =========================================================
   FINAL STATUS / JOURNEY
   ========================================================= */

.ars-haven .haven-status {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(185,130,85,.28);

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(185,130,85,.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(57,191,255,.09),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            rgba(185,130,85,.065),
            rgba(6,18,27,.82),
            rgba(57,191,255,.055)
        );

    box-shadow:
        0 0 30px rgba(185,130,85,.08),
        0 0 70px rgba(57,191,255,.05),
        inset 0 1px 0 rgba(232,195,154,.15);
}

.ars-haven .haven-status::before {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,130,85,.85),
            rgba(232,195,154,.95),
            rgba(57,191,255,.85),
            transparent
        );

    box-shadow:
        0 0 12px rgba(185,130,85,.25),
        0 0 22px rgba(57,191,255,.12);
}

.ars-haven .haven-status h2 {

    color: var(--haven-bronze-light) !important;

    text-shadow:
        0 0 10px rgba(185,130,85,.25),
        0 0 28px rgba(57,191,255,.07);
}


/* =========================================================
   BUTTONS — HAVEN DNA
   ========================================================= */

.ars-haven .btn-primary {

    border-color: rgba(185,130,85,.55) !important;

    background:
        linear-gradient(
            105deg,
            rgba(185,130,85,.18),
            rgba(57,191,255,.10)
        ) !important;

    box-shadow:
        0 0 15px rgba(185,130,85,.10),
        inset 0 1px 0 rgba(232,195,154,.18);
}

.ars-haven .btn-secondary {

    border-color: rgba(57,191,255,.38) !important;

    background:
        rgba(57,191,255,.035) !important;

    box-shadow:
        0 0 14px rgba(57,191,255,.06);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .ars-haven .haven-hero,
    .ars-haven .haven-story-visual,
    .ars-haven .haven-ecosystem-visual {

        grid-template-columns: 1fr;
    }

    .ars-haven .haven-image {

        min-height: 340px;
    }

    .ars-haven .haven-story-image,
    .ars-haven .haven-ecosystem-image {

        min-height: 280px;
    }
}


@media (max-width: 600px) {

    .ars-haven .haven-image {

        min-height: 260px;
    }

    .ars-haven .haven-story-image,
    .ars-haven .haven-ecosystem-image {

        min-height: 220px;
    }

    .ars-haven .haven-ecosystem-data {

        grid-template-columns: 1fr;
    }

    .ars-haven .haven-story-line {

        gap: 7px;
    }

    .ars-haven .haven-story-line i {

        width: 16px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .ars-haven *,
    .ars-haven *::before,
    .ars-haven *::after {

        animation: none !important;

        transition: none !important;
    }
}
























/* =========================================================
   ROSE AI — SIGNATURE INTELLIGENCE SYSTEM
   MATTE BRONZE × ELECTRIC BLUE × DEEP BURGUNDY
   ========================================================= */

.rose-ai {

    --rose-bronze: #B98255;
    --rose-bronze-deep: #8F603F;
    --rose-bronze-light: #E8C39A;

    --rose-blue: #39BFFF;
    --rose-cyan: #79DDFF;

    --rose-burgundy: #7A1738;
    --rose-burgundy-deep: #430C20;
    --rose-crimson: #A52A52;
    --rose-rose-light: #D66A8C;

    --rose-gold: #C9A45C;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(185,130,85,.09),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 22%,
            rgba(57,191,255,.075),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 48%,
            rgba(122,23,56,.075),
            transparent 38%
        ),
        radial-gradient(
            circle at 50% 92%,
            rgba(67,12,32,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #03070B 0%,
            #07111A 48%,
            #05080D 100%
        );
}


/* =========================================================
   ROSE ATMOSPHERIC ORBS
   ========================================================= */

.rose-ai::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: 7%;
    top: 20%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(165,42,82,.19) 0%,
            rgba(122,23,56,.13) 25%,
            rgba(67,12,32,.075) 48%,
            transparent 72%
        );

    filter: blur(18px);

    opacity: .75;

    pointer-events: none;

    animation:
        roseOrbBreath 8s ease-in-out infinite;
}


.rose-ai::after {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: 3%;
    top: 42%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.075) 0%,
            rgba(57,191,255,.035) 30%,
            transparent 70%
        );

    filter: blur(25px);

    pointer-events: none;

    animation:
        roseBlueOrbBreath 10s ease-in-out infinite;
}


/* =========================================================
   ALL MAIN SECTION HEADINGS
   ========================================================= */

.rose-ai .section-heading h2,
.rose-ai .rose-message h2 {

    color: var(--rose-bronze-light) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.28),
        0 0 20px rgba(185,130,85,.15),
        0 0 38px rgba(57,191,255,.07) !important;

    letter-spacing: -.025em;
}


/* =========================================================
   ROSE LABELS
   ========================================================= */

.rose-ai .section-label {

    color: var(--rose-bronze) !important;

    letter-spacing: .20em;

    text-shadow:
        0 0 8px rgba(185,130,85,.32),
        0 0 18px rgba(122,23,56,.18);
}


/* =========================================================
   HEADING SIGNAL
   ========================================================= */

.rose-ai .section-heading::after {

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(143,96,63,.35) 12%,
            rgba(185,130,85,.95) 30%,
            rgba(232,195,154,.92) 42%,
            rgba(122,23,56,.90) 55%,
            rgba(165,42,82,.95) 63%,
            rgba(57,191,255,.95) 77%,
            rgba(57,191,255,.45) 88%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(185,130,85,.25),
        0 0 18px rgba(122,23,56,.16),
        0 0 26px rgba(57,191,255,.12) !important;
}


/* =========================================================
   MAIN ROSE LAYOUT
   ========================================================= */

.rose-ai .rose-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

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

    align-items: center;
}


/* =========================================================
   ROSE HERO IMAGE
   ========================================================= */

.rose-ai .rose-image {

    position: relative;

    min-height: 420px;

    overflow: hidden;

    display: flex;

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

    border: 1px solid rgba(122,23,56,.28);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(122,23,56,.12),
            transparent 52%
        ),
        linear-gradient(
            135deg,
            rgba(185,130,85,.065),
            rgba(7,16,24,.82) 48%,
            rgba(57,191,255,.045)
        );

    box-shadow:
        0 0 24px rgba(122,23,56,.10),
        0 0 50px rgba(57,191,255,.045),
        inset 0 1px 0 rgba(232,195,154,.13);
}


/* AI CORE AURA */

.rose-ai .rose-image::before {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214,106,140,.22) 0%,
            rgba(165,42,82,.14) 28%,
            rgba(122,23,56,.08) 48%,
            transparent 72%
        );

    filter: blur(10px);

    pointer-events: none;

    animation:
        roseCorePulse 5.5s ease-in-out infinite;
}


/* OUTER INTELLIGENCE RING */

.rose-ai .rose-image::after {

    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border: 1px solid rgba(122,23,56,.18);

    box-shadow:
        0 0 25px rgba(122,23,56,.08),
        inset 0 0 25px rgba(57,191,255,.035);

    pointer-events: none;

    animation:
        roseRingBreath 7s ease-in-out infinite;
}


.rose-ai .rose-image img {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        saturate(.94)
        contrast(1.06)
        brightness(1.01);

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


.rose-ai .rose-image:hover img {

    transform: scale(1.025);

    filter:
        saturate(1)
        contrast(1.08)
        brightness(1.04);
}


/* =========================================================
   ROSE CONTENT
   ========================================================= */

.rose-ai .rose-content h3 {

    color: var(--rose-bronze-light) !important;

    text-shadow:
        0 0 9px rgba(185,130,85,.20),
        0 0 20px rgba(122,23,56,.10);
}


.rose-ai .rose-content p {

    color: rgba(222,229,234,.79);

    line-height: 1.9;
}


/* =========================================================
   CAPABILITY CARDS
   ========================================================= */

.rose-ai .rose-capabilities {

    position: relative;

    display: grid;

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

    gap: 16px;

    margin-top: clamp(45px, 6vw, 80px);
}


/* EVERY ROSE CARD */

.rose-ai .rose-card {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(122,23,56,.28);

    background:
        linear-gradient(
            145deg,
            rgba(122,23,56,.105),
            rgba(8,15,22,.82) 52%,
            rgba(57,191,255,.035)
        );

    box-shadow:
        0 0 18px rgba(122,23,56,.075),
        0 0 34px rgba(57,191,255,.025),
        inset 0 1px 0 rgba(214,106,140,.12);

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


/* TOP AI ENERGY EDGE */

.rose-ai .rose-card::before {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(122,23,56,.85),
            rgba(214,106,140,.85),
            rgba(57,191,255,.65),
            transparent
        );

    box-shadow:
        0 0 10px rgba(165,42,82,.20);
}


/* SUBTLE INTERNAL BURGUNDY ORB */

.rose-ai .rose-card::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -45px;
    bottom: -45px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(165,42,82,.14),
            rgba(122,23,56,.06) 45%,
            transparent 72%
        );

    filter: blur(8px);

    pointer-events: none;
}


.rose-ai .rose-card:hover {

    transform: translateY(-6px);

    border-color: rgba(165,42,82,.48);

    box-shadow:
        0 0 24px rgba(122,23,56,.14),
        0 0 42px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(214,106,140,.20);
}


/* =========================================================
   ROSE ICONS
   ========================================================= */

.rose-ai .rose-icon {

    position: relative;

    color: var(--rose-rose-light) !important;

    text-shadow:
        0 0 9px rgba(165,42,82,.38),
        0 0 20px rgba(122,23,56,.18);

    transition:
        transform .4s ease,
        text-shadow .4s ease;
}


.rose-ai .rose-card:hover .rose-icon {

    transform: translateY(-2px) scale(1.06);

    text-shadow:
        0 0 12px rgba(214,106,140,.55),
        0 0 28px rgba(122,23,56,.25);
}


.rose-ai .rose-card h3 {

    color: var(--rose-bronze-light) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.16),
        0 0 16px rgba(122,23,56,.07);
}


.rose-ai .rose-card p {

    color: rgba(218,226,231,.72);

    line-height: 1.75;
}


/* =========================================================
   DIFFERENT BURGUNDY DNA FOR SIX CARDS
   ========================================================= */

.rose-ai .rose-card:nth-child(1),
.rose-ai .rose-card:nth-child(4) {

    border-color: rgba(122,23,56,.30);
}


.rose-ai .rose-card:nth-child(2),
.rose-ai .rose-card:nth-child(5) {

    border-color: rgba(165,42,82,.24);
}


.rose-ai .rose-card:nth-child(3),
.rose-ai .rose-card:nth-child(6) {

    border-color: rgba(57,191,255,.18);
}


/* =========================================================
   FINAL ROSE MESSAGE
   ========================================================= */

.rose-ai .rose-message {

    position: relative;

    overflow: hidden;

    margin-top: clamp(50px, 7vw, 90px);

    border: 1px solid rgba(122,23,56,.30);

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(165,42,82,.105),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 50%,
            rgba(57,191,255,.075),
            transparent 33%
        ),
        linear-gradient(
            120deg,
            rgba(122,23,56,.065),
            rgba(6,17,25,.84),
            rgba(57,191,255,.045)
        );

    box-shadow:
        0 0 28px rgba(122,23,56,.08),
        0 0 65px rgba(57,191,255,.04),
        inset 0 1px 0 rgba(214,106,140,.13);
}


/* FINAL TOP ENERGY */

.rose-ai .rose-message::before {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,130,85,.80),
            rgba(165,42,82,.95),
            rgba(214,106,140,.95),
            rgba(57,191,255,.85),
            transparent
        );

    box-shadow:
        0 0 12px rgba(165,42,82,.25),
        0 0 24px rgba(57,191,255,.10);
}


/* FINAL BURGUNDY CORE */

.rose-ai .rose-message::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -80px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(165,42,82,.11),
            rgba(122,23,56,.055) 42%,
            transparent 72%
        );

    filter: blur(18px);

    pointer-events: none;

    animation:
        roseMessageOrb 8s ease-in-out infinite;
}


/* =========================================================
   FINAL BUTTONS
   ========================================================= */

.rose-ai .btn-primary {

    border-color: rgba(165,42,82,.48) !important;

    background:
        linear-gradient(
            105deg,
            rgba(122,23,56,.18),
            rgba(185,130,85,.08),
            rgba(57,191,255,.055)
        ) !important;

    box-shadow:
        0 0 15px rgba(122,23,56,.10),
        inset 0 1px 0 rgba(214,106,140,.15);
}


.rose-ai .btn-secondary {

    border-color: rgba(57,191,255,.36) !important;

    background:
        rgba(57,191,255,.035) !important;

    box-shadow:
        0 0 14px rgba(57,191,255,.055);
}


/* =========================================================
   ROSE INTELLIGENCE MOTION
   ========================================================= */

@keyframes roseOrbBreath {

    0%, 100% {
        transform: scale(.94);
        opacity: .62;
    }

    50% {
        transform: scale(1.08);
        opacity: .90;
    }
}


@keyframes roseBlueOrbBreath {

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

    50% {
        transform: scale(1.06);
        opacity: .82;
    }
}


@keyframes roseCorePulse {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.92);
        opacity: .62;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: .98;
    }
}


@keyframes roseRingBreath {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.96);
        opacity: .42;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.045);
        opacity: .82;
    }
}


@keyframes roseMessageOrb {

    0%, 100% {
        transform: translateY(-50%) scale(.94);
        opacity: .52;
    }

    50% {
        transform: translateY(-50%) scale(1.08);
        opacity: .85;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .rose-ai .rose-layout {

        grid-template-columns: 1fr;
    }

    .rose-ai .rose-capabilities {

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

    .rose-ai .rose-image {

        min-height: 340px;
    }
}


@media (max-width: 600px) {

    .rose-ai .rose-capabilities {

        grid-template-columns: 1fr;
    }

    .rose-ai .rose-image {

        min-height: 260px;
    }

    .rose-ai::before {

        width: 280px;
        height: 280px;
    }

    .rose-ai::after {

        width: 330px;
        height: 330px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .rose-ai *,
    .rose-ai *::before,
    .rose-ai *::after {

        animation: none !important;
        transition: none !important;
    }
}






















/* =========================================================
   ZHR NAJI — INTELLIGENT PROTECTION SYSTEM
   MATTE BRONZE × ELECTRIC BLUE
   GUARDIAN / SAFETY / RESCUE
   ========================================================= */

.zhr-naji {

    --zhr-bronze: #B98255;
    --zhr-bronze-deep: #8F603F;
    --zhr-bronze-light: #E8C39A;

    --zhr-blue: #39BFFF;
    --zhr-cyan: #79DDFF;

    --zhr-navy: #06131D;
    --zhr-black: #03070B;

    --zhr-gold: #C9A45C;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(57,191,255,.075),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 28%,
            rgba(185,130,85,.075),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 58%,
            rgba(57,191,255,.045),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #03070B 0%,
            #06131D 50%,
            #03080D 100%
        );
}


/* =========================================================
   PROTECTIVE ATMOSPHERE
   ========================================================= */

.zhr-naji::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -170px;
    top: 22%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.12) 0%,
            rgba(57,191,255,.055) 28%,
            rgba(57,191,255,.018) 52%,
            transparent 72%
        );

    filter: blur(18px);

    pointer-events: none;

    animation:
        zhrGuardianGlow 9s ease-in-out infinite;
}


.zhr-naji::after {

    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    right: -130px;
    top: 48%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185,130,85,.10) 0%,
            rgba(185,130,85,.04) 34%,
            transparent 70%
        );

    filter: blur(20px);

    pointer-events: none;

    animation:
        zhrGuardianBronze 11s ease-in-out infinite;
}


/* =========================================================
   HEADINGS — ZHR SIGNATURE
   ========================================================= */

.zhr-naji .section-heading h2,
.zhr-naji .zhr-philosophy h2,
.zhr-naji .zhr-status h2 {

    color: var(--zhr-bronze-light) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.28),
        0 0 20px rgba(185,130,85,.14),
        0 0 38px rgba(57,191,255,.07) !important;

    letter-spacing: -.025em;
}


/* =========================================================
   LABELS
   ========================================================= */

.zhr-naji .section-label {

    color: var(--zhr-bronze) !important;

    letter-spacing: .20em;

    text-shadow:
        0 0 8px rgba(185,130,85,.34),
        0 0 18px rgba(57,191,255,.08);
}


/* =========================================================
   SECURITY SIGNAL LINE
   ========================================================= */

.zhr-naji .section-heading::after {

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(143,96,63,.30) 13%,
            rgba(185,130,85,.90) 30%,
            rgba(232,195,154,.95) 43%,
            rgba(57,191,255,.95) 62%,
            rgba(57,191,255,.55) 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(185,130,85,.25),
        0 0 18px rgba(57,191,255,.16) !important;
}


/* =========================================================
   MAIN ZHR LAYOUT
   ========================================================= */

.zhr-naji .zhr-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

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

    align-items: center;
}


/* =========================================================
   PROTECTION IMAGE CHAMBER
   ========================================================= */

.zhr-naji .zhr-image {

    position: relative;

    min-height: 420px;

    overflow: hidden;

    display: flex;

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

    border: 1px solid rgba(57,191,255,.24);

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.075),
            transparent 52%
        ),
        linear-gradient(
            135deg,
            rgba(57,191,255,.055),
            rgba(7,17,25,.84) 52%,
            rgba(185,130,85,.055)
        );

    box-shadow:
        0 0 24px rgba(57,191,255,.08),
        0 0 55px rgba(185,130,85,.035),
        inset 0 1px 0 rgba(121,221,255,.14);
}


/* PROTECTIVE FIELD */

.zhr-naji .zhr-image::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border: 1px solid rgba(57,191,255,.13);

    box-shadow:
        0 0 28px rgba(57,191,255,.08),
        inset 0 0 30px rgba(57,191,255,.035);

    pointer-events: none;

    animation:
        zhrProtectionField 6.5s ease-in-out infinite;
}


/* INNER GUARDIAN CORE */

.zhr-naji .zhr-image::after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(121,221,255,.13),
            rgba(57,191,255,.055) 38%,
            transparent 70%
        );

    filter: blur(5px);

    pointer-events: none;

    animation:
        zhrCorePulse 5s ease-in-out infinite;
}


.zhr-naji .zhr-image img {

    position: relative;

    z-index: 3;

    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        saturate(.90)
        contrast(1.07)
        brightness(1.01);

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


.zhr-naji .zhr-image:hover img {

    transform: scale(1.025);

    filter:
        saturate(.98)
        contrast(1.09)
        brightness(1.04);
}


/* =========================================================
   ZHR CONTENT
   ========================================================= */

.zhr-naji .zhr-content h3 {

    color: var(--zhr-bronze-light) !important;

    text-shadow:
        0 0 9px rgba(185,130,85,.20),
        0 0 22px rgba(57,191,255,.06);
}


.zhr-naji .zhr-content p {

    color: rgba(222,229,234,.79);

    line-height: 1.9;
}


/* =========================================================
   CORE MISSION CARDS
   ========================================================= */

.zhr-naji .zhr-grid {

    position: relative;

    display: grid;

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

    gap: 16px;

    margin-top: clamp(40px, 5vw, 68px);
}


.zhr-naji .zhr-card {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.18);

    background:
        linear-gradient(
            145deg,
            rgba(57,191,255,.055),
            rgba(7,16,23,.84) 52%,
            rgba(185,130,85,.045)
        );

    box-shadow:
        0 0 18px rgba(57,191,255,.045),
        inset 0 1px 0 rgba(121,221,255,.09);

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


/* PROTECTION SCAN EDGE */

.zhr-naji .zhr-card::before {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.80),
            rgba(121,221,255,.90),
            rgba(185,130,85,.55),
            transparent
        );

    box-shadow:
        0 0 10px rgba(57,191,255,.18);
}


/* PROTECTIVE RADAR POINT */

.zhr-naji .zhr-card::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -38px;
    bottom: -38px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.12),
            rgba(57,191,255,.035) 48%,
            transparent 72%
        );

    filter: blur(5px);

    pointer-events: none;
}


.zhr-naji .zhr-card:hover {

    transform: translateY(-5px);

    border-color: rgba(57,191,255,.38);

    box-shadow:
        0 0 22px rgba(57,191,255,.10),
        0 0 38px rgba(185,130,85,.035),
        inset 0 1px 0 rgba(121,221,255,.16);
}


/* =========================================================
   MISSION ICONS
   ========================================================= */

.zhr-naji .zhr-icon {

    color: var(--zhr-cyan) !important;

    text-shadow:
        0 0 10px rgba(57,191,255,.34),
        0 0 24px rgba(57,191,255,.12);

    transition:
        transform .4s ease,
        text-shadow .4s ease;
}


.zhr-naji .zhr-card:hover .zhr-icon {

    transform: scale(1.06);

    text-shadow:
        0 0 13px rgba(121,221,255,.55),
        0 0 28px rgba(57,191,255,.20);
}


.zhr-naji .zhr-card h3 {

    color: var(--zhr-bronze-light) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.18);
}


.zhr-naji .zhr-card p {

    color: rgba(218,226,231,.72);

    line-height: 1.75;
}


/* =========================================================
   MISSION COLOR DNA
   ========================================================= */

.zhr-naji .zhr-card:nth-child(1),
.zhr-naji .zhr-card:nth-child(4) {

    border-color: rgba(57,191,255,.24);
}


.zhr-naji .zhr-card:nth-child(2),
.zhr-naji .zhr-card:nth-child(5) {

    border-color: rgba(185,130,85,.22);
}


.zhr-naji .zhr-card:nth-child(3),
.zhr-naji .zhr-card:nth-child(6) {

    border-color: rgba(121,221,255,.20);
}


/* =========================================================
   PHILOSOPHY — GUARDIAN CORE
   ========================================================= */

.zhr-naji .zhr-philosophy {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.20);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(57,191,255,.055),
            transparent 48%
        ),
        linear-gradient(
            120deg,
            rgba(185,130,85,.055),
            rgba(6,17,25,.84),
            rgba(57,191,255,.055)
        );

    box-shadow:
        0 0 26px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(121,221,255,.10);
}


/* GUARDIAN SIGNAL */

.zhr-naji .zhr-philosophy::before {

    content: "";

    position: absolute;

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

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(57,191,255,.90),
            rgba(185,130,85,.75),
            transparent
        );

    box-shadow:
        0 0 12px rgba(57,191,255,.16);
}


/* =========================================================
   FINAL STATUS — RESCUE / RESPONSE
   ========================================================= */

.zhr-naji .zhr-status {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(185,130,85,.26);

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(57,191,255,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 50%,
            rgba(185,130,85,.08),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            rgba(57,191,255,.045),
            rgba(6,17,25,.86),
            rgba(185,130,85,.055)
        );

    box-shadow:
        0 0 28px rgba(57,191,255,.055),
        0 0 60px rgba(185,130,85,.045),
        inset 0 1px 0 rgba(232,195,154,.14);
}


/* RESCUE SIGNAL */

.zhr-naji .zhr-status::before {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.85),
            rgba(121,221,255,.95),
            rgba(185,130,85,.90),
            rgba(232,195,154,.80),
            transparent
        );

    box-shadow:
        0 0 12px rgba(57,191,255,.18),
        0 0 24px rgba(185,130,85,.10);
}


.zhr-naji .zhr-status h2 {

    color: var(--zhr-bronze-light) !important;

    text-shadow:
        0 0 10px rgba(185,130,85,.26),
        0 0 28px rgba(57,191,255,.07);
}


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

.zhr-naji .btn-primary {

    border-color: rgba(185,130,85,.48) !important;

    background:
        linear-gradient(
            105deg,
            rgba(185,130,85,.14),
            rgba(57,191,255,.08)
        ) !important;

    box-shadow:
        0 0 15px rgba(185,130,85,.09),
        inset 0 1px 0 rgba(232,195,154,.16);
}


.zhr-naji .btn-secondary {

    border-color: rgba(57,191,255,.38) !important;

    background:
        rgba(57,191,255,.035) !important;

    box-shadow:
        0 0 15px rgba(57,191,255,.06);
}


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

@keyframes zhrGuardianGlow {

    0%, 100% {
        transform: scale(.94);
        opacity: .48;
    }

    50% {
        transform: scale(1.08);
        opacity: .82;
    }
}


@keyframes zhrGuardianBronze {

    0%, 100% {
        transform: scale(.95);
        opacity: .44;
    }

    50% {
        transform: scale(1.06);
        opacity: .76;
    }
}


@keyframes zhrProtectionField {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.94);
        opacity: .38;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: .82;
    }
}


@keyframes zhrCorePulse {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.88);
        opacity: .42;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: .90;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .zhr-naji .zhr-layout {

        grid-template-columns: 1fr;
    }

    .zhr-naji .zhr-grid {

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

    .zhr-naji .zhr-image {

        min-height: 340px;
    }
}


@media (max-width: 600px) {

    .zhr-naji .zhr-grid {

        grid-template-columns: 1fr;
    }

    .zhr-naji .zhr-image {

        min-height: 260px;
    }

    .zhr-naji::before {

        width: 300px;
        height: 300px;
    }

    .zhr-naji::after {

        width: 300px;
        height: 300px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .zhr-naji *,
    .zhr-naji *::before,
    .zhr-naji *::after {

        animation: none !important;
        transition: none !important;
    }
}

























/* =====================================================
   ARS OS — DIGITAL BACKBONE
   MATTE BRONZE × ELECTRIC BLUE
   ===================================================== */

.ars-os {
    --os-bronze: #B98255;
    --os-bronze-deep: #8F603F;
    --os-bronze-light: #E8C39A;

    --os-blue: #39BFFF;
    --os-cyan: #79DDFF;

    --os-black: #03070B;
    --os-navy: #06121B;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(57,191,255,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(185,130,85,.075),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #03070B 0%,
            #06121B 48%,
            #03070B 100%
        );
}


/* -----------------------------------------------------
   DIGITAL ATMOSPHERE
   ----------------------------------------------------- */

.ars-os::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.035) 50%,
            transparent 100%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 79px,
            rgba(57,191,255,.018) 80px,
            transparent 81px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 79px,
            rgba(185,130,85,.014) 80px,
            transparent 81px
        );
    opacity: .7;
}

.ars-os::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -300px;
    top: 18%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.075) 0%,
            rgba(57,191,255,.025) 34%,
            transparent 70%
        );

    filter: blur(20px);
    animation: arsOSAtmosphere 9s ease-in-out infinite;
}

@keyframes arsOSAtmosphere {
    0%,100% {
        transform: translate3d(0,0,0) scale(.94);
        opacity: .55;
    }

    50% {
        transform: translate3d(-35px,20px,0) scale(1.04);
        opacity: .9;
    }
}


/* -----------------------------------------------------
   SECTION HEADINGS
   ----------------------------------------------------- */

.ars-os .section-heading {
    position: relative;
}

.ars-os .section-label {
    color: var(--os-bronze) !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.28),
        0 0 20px rgba(57,191,255,.08) !important;
}

.ars-os .section-heading h2 {
    color: var(--os-bronze-light) !important;

    text-shadow:
        0 0 10px rgba(185,130,85,.18),
        0 0 28px rgba(185,130,85,.08),
        0 0 42px rgba(57,191,255,.055) !important;
}

.ars-os .section-heading p {
    color: rgba(220,232,238,.72) !important;
}

.ars-os .section-heading::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143,96,63,.5),
            rgba(185,130,85,.95),
            rgba(57,191,255,.95),
            rgba(57,191,255,.4),
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(185,130,85,.22),
        0 0 18px rgba(57,191,255,.14) !important;
}


/* -----------------------------------------------------
   MAIN OS LAYOUT
   ----------------------------------------------------- */

.ars-os .os-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 55px;
    align-items: center;
}


/* -----------------------------------------------------
   OS VISUAL — DIGITAL CORE
   ----------------------------------------------------- */

.ars-os .os-image {
    position: relative;
    min-height: 390px;

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

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.22) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.09),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(12,25,34,.88),
            rgba(4,10,15,.94)
        ) !important;

    box-shadow:
        0 0 25px rgba(57,191,255,.09),
        0 0 65px rgba(57,191,255,.045),
        inset 0 0 35px rgba(57,191,255,.035) !important;
}


/* digital frame */

.ars-os .os-image::before {
    content: "";
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;

    border: 1px solid rgba(57,191,255,.20);

    box-shadow:
        0 0 25px rgba(57,191,255,.10),
        inset 0 0 30px rgba(57,191,255,.04);

    animation: arsOSCoreRing 7s linear infinite;
}

.ars-os .os-image::after {
    content: "";
    position: absolute;
    width: 35%;
    aspect-ratio: 1;
    border-radius: 50%;

    border: 1px solid rgba(185,130,85,.42);

    box-shadow:
        0 0 22px rgba(185,130,85,.18),
        inset 0 0 24px rgba(185,130,85,.06);

    animation: arsOSCoreInner 5s ease-in-out infinite;
}

@keyframes arsOSCoreRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes arsOSCoreInner {
    0%,100% {
        transform: scale(.92);
        opacity: .62;
    }

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

.ars-os .os-image img {
    position: relative;
    z-index: 3;

    width: 88%;
    max-width: 620px;
    height: auto;

    object-fit: contain;

    filter:
        saturate(.92)
        contrast(1.06)
        drop-shadow(0 0 18px rgba(57,191,255,.12));

    transition:
        transform .6s ease,
        filter .6s ease;
}

.ars-os .os-image:hover img {
    transform: scale(1.035);

    filter:
        saturate(1)
        contrast(1.08)
        drop-shadow(0 0 25px rgba(57,191,255,.18));
}


/* -----------------------------------------------------
   SOFTWARE CONTENT
   ----------------------------------------------------- */

.ars-os .os-content {
    position: relative;
    padding: 10px 0 10px 25px;

    border-left: 1px solid rgba(185,130,85,.25);
}

.ars-os .os-content::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;

    width: 1px;
    height: 72px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--os-blue),
            var(--os-bronze),
            transparent
        );

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

.ars-os .os-content h3 {
    color: #F0D8BC !important;

    font-size: clamp(1.5rem,2.5vw,2.25rem);

    text-shadow:
        0 0 14px rgba(185,130,85,.12);
}

.ars-os .os-content p {
    color: rgba(218,230,236,.72) !important;
    line-height: 1.9;
}


/* -----------------------------------------------------
   CORE CAPABILITY GRID
   ----------------------------------------------------- */

.ars-os .os-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}


/* -----------------------------------------------------
   OS CARDS
   ----------------------------------------------------- */

.ars-os .os-card {
    position: relative;
    min-height: 205px;

    padding: 27px 24px;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.17) !important;

    background:
        linear-gradient(
            145deg,
            rgba(14,29,39,.72),
            rgba(5,11,16,.82)
        ) !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(121,221,255,.08),
        inset 0 0 25px rgba(57,191,255,.018) !important;

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


/* software signal */

.ars-os .os-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.8),
            rgba(185,130,85,.55),
            transparent
        );

    opacity: .6;
}

.ars-os .os-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;

    right: -45px;
    bottom: -45px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.10),
            transparent 70%
        );

    filter: blur(4px);
}

.ars-os .os-card:hover {
    transform: translateY(-7px);

    border-color: rgba(57,191,255,.38) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.32),
        0 0 24px rgba(57,191,255,.07),
        inset 0 1px 0 rgba(121,221,255,.16);
}


/* -----------------------------------------------------
   ICONS
   ----------------------------------------------------- */

.ars-os .os-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 18px;

    border: 1px solid rgba(185,130,85,.35);
    border-radius: 12px;

    color: var(--os-blue);

    background:
        linear-gradient(
            145deg,
            rgba(185,130,85,.09),
            rgba(57,191,255,.06)
        );

    box-shadow:
        0 0 15px rgba(57,191,255,.07),
        inset 0 0 12px rgba(185,130,85,.035);
}

.ars-os .os-card h3 {
    color: var(--os-bronze-light) !important;
}

.ars-os .os-card p {
    color: rgba(210,224,231,.64) !important;
    line-height: 1.7;
}


/* -----------------------------------------------------
   HIGHLIGHT — SOFTWARE CORE
   ----------------------------------------------------- */

.ars-os .os-highlight {
    position: relative;

    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 35px;
    align-items: center;

    margin-top: 55px;
    padding: 42px;

    overflow: hidden;

    border: 1px solid rgba(185,130,85,.24) !important;

    background:
        linear-gradient(
            110deg,
            rgba(185,130,85,.075),
            rgba(57,191,255,.055),
            rgba(6,18,27,.72)
        ) !important;

    box-shadow:
        0 0 35px rgba(185,130,85,.055),
        inset 0 1px 0 rgba(232,195,154,.12);
}

.ars-os .os-highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--os-bronze),
            var(--os-blue),
            transparent
        );

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

.ars-os .os-highlight h2 {
    color: var(--os-bronze-light) !important;
}

.ars-os .os-highlight p {
    color: rgba(215,227,233,.68) !important;
    line-height: 1.85;
}


/* -----------------------------------------------------
   STATUS / DIGITAL BACKBONE
   ----------------------------------------------------- */

.ars-os .os-status {
    position: relative;

    margin-top: 28px;
    padding: 42px;

    text-align: center;

    border: 1px solid rgba(57,191,255,.20) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.055),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(10,22,30,.82),
            rgba(4,9,13,.9)
        ) !important;

    box-shadow:
        0 0 30px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(121,221,255,.08);
}

.ars-os .os-status::before {
    content: "";
    position: absolute;

    left: 50%;
    top: 0;

    width: 180px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--os-bronze),
            var(--os-blue),
            transparent
        );

    box-shadow:
        0 0 12px rgba(57,191,255,.22);
}

.ars-os .os-status h2 {
    color: var(--os-bronze-light) !important;
}

.ars-os .os-status p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;

    color: rgba(215,227,233,.68) !important;
    line-height: 1.85;
}


/* -----------------------------------------------------
   BUTTONS
   ----------------------------------------------------- */

.ars-os .btn-primary {
    background:
        linear-gradient(
            110deg,
            var(--os-bronze-deep),
            var(--os-bronze),
            #C99A70
        ) !important;

    box-shadow:
        0 0 18px rgba(185,130,85,.18);
}

.ars-os .btn-secondary {
    border-color: rgba(57,191,255,.35) !important;
    color: var(--os-cyan) !important;

    box-shadow:
        0 0 14px rgba(57,191,255,.06);
}


/* -----------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------- */

@media (max-width: 1000px) {

    .ars-os .os-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ars-os .os-content {
        padding-left: 20px;
    }

    .ars-os .os-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .ars-os .os-highlight {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .ars-os .os-image {
        min-height: 280px;
    }

    .ars-os .os-image img {
        width: 92%;
    }

    .ars-os .os-grid {
        grid-template-columns: 1fr;
    }

    .ars-os .os-card {
        min-height: 175px;
    }

    .ars-os .os-highlight,
    .ars-os .os-status {
        padding: 28px 22px;
    }

    .ars-os .os-content {
        padding-left: 16px;
    }
}


/* -----------------------------------------------------
   REDUCED MOTION
   ----------------------------------------------------- */

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

    .ars-os::after,
    .ars-os .os-image::before,
    .ars-os .os-image::after {
        animation: none !important;
    }

    .ars-os .os-card,
    .ars-os .os-image img {
        transition: none !important;
    }
}
















/* =========================================================
   ARS FUTURE TECHNOLOGIES
   FUTURE INTELLIGENCE — ELECTRIC BLUE DOMINANT
   75% ELECTRIC BLUE × 15% DEEP NAVY × 10% MATTE BRONZE
   ========================================================= */

.future-technologies {

    --future-blue: #39BFFF;
    --future-cyan: #79DDFF;
    --future-blue-deep: #168CFF;

    --future-bronze: #B98255;
    --future-navy: #06121B;
    --future-black: #02070B;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(57,191,255,.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(22,140,255,.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 65%,
            rgba(57,191,255,.075),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #02070B 0%,
            #06121B 48%,
            #02070B 100%
        );
}


/* =========================================================
   FUTURE ATMOSPHERE
   ========================================================= */

.future-technologies::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;
    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.035) 50%,
            transparent 100%
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 79px,
            rgba(57,191,255,.025) 80px,
            transparent 81px
        ),

        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 79px,
            rgba(57,191,255,.018) 80px,
            transparent 81px
        );

    opacity: .85;
}


/* moving future energy field */

.future-technologies::after {

    content: "";

    position: absolute;

    width: 850px;
    height: 850px;

    left: 50%;
    top: 8%;

    transform: translateX(-50%);

    border-radius: 50%;

    pointer-events: none;
    z-index: -2;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.12) 0%,
            rgba(57,191,255,.055) 25%,
            rgba(22,140,255,.025) 48%,
            transparent 72%
        );

    filter: blur(18px);

    animation:
        futureBlueCore 10s ease-in-out infinite;
}

@keyframes futureBlueCore {

    0%,100% {
        transform: translateX(-50%) scale(.92);
        opacity: .65;
    }

    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 1;
    }
}


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

.future-technologies .section-label {

    color: var(--future-blue) !important;

    text-shadow:
        0 0 8px rgba(57,191,255,.45),
        0 0 20px rgba(57,191,255,.20) !important;
}

.future-technologies .section-heading h2 {

    color: var(--future-cyan) !important;

    text-shadow:
        0 0 12px rgba(57,191,255,.35),
        0 0 28px rgba(57,191,255,.18),
        0 0 50px rgba(22,140,255,.10) !important;
}

.future-technologies .section-heading p {

    color: rgba(218,237,246,.76) !important;
}

.future-technologies .section-heading::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22,140,255,.35),
            rgba(57,191,255,1),
            rgba(121,221,255,.85),
            rgba(57,191,255,1),
            rgba(185,130,85,.45),
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(57,191,255,.45),
        0 0 22px rgba(57,191,255,.20) !important;
}


/* =========================================================
   FUTURE HERO
   ========================================================= */

.future-technologies .future-hero {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 45px;

    align-items: center;

    padding: 48px;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.30) !important;

    background:
        radial-gradient(
            circle at 72% 50%,
            rgba(57,191,255,.11),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            rgba(7,20,29,.88),
            rgba(3,10,15,.78)
        ) !important;

    box-shadow:
        0 0 30px rgba(57,191,255,.09),
        0 0 80px rgba(57,191,255,.035),
        inset 0 1px 0 rgba(121,221,255,.18),
        inset 0 0 35px rgba(57,191,255,.035) !important;
}


/* future scanning edge */

.future-technologies .future-hero::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.4),
            var(--future-cyan),
            rgba(57,191,255,.45),
            transparent
        );

    box-shadow:
        0 0 14px rgba(57,191,255,.5);
}


/* =========================================================
   FUTURE HERO TEXT
   ========================================================= */

.future-technologies .future-left h2 {

    color: var(--future-cyan) !important;

    text-shadow:
        0 0 14px rgba(57,191,255,.25),
        0 0 32px rgba(57,191,255,.10);
}

.future-technologies .future-left p {

    color: rgba(220,237,244,.72) !important;

    line-height: 1.9;
}


/* =========================================================
   FUTURE IMAGE CHAMBER
   ========================================================= */

.future-technologies .future-right {

    position: relative;

    min-height: 360px;

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

    overflow: hidden;
}


/* orbital intelligence field */

.future-technologies .future-right::before {

    content: "";

    position: absolute;

    width: 72%;
    aspect-ratio: 1;

    border-radius: 50%;

    border: 1px solid rgba(57,191,255,.24);

    box-shadow:
        0 0 25px rgba(57,191,255,.12),
        inset 0 0 30px rgba(57,191,255,.045);

    animation:
        futureOrbit 12s linear infinite;
}

.future-technologies .future-right::after {

    content: "";

    position: absolute;

    width: 40%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(121,221,255,.20),
            rgba(57,191,255,.08) 32%,
            transparent 70%
        );

    box-shadow:
        0 0 35px rgba(57,191,255,.22),
        0 0 75px rgba(57,191,255,.10);

    animation:
        futureCorePulse 4.5s ease-in-out infinite;
}

@keyframes futureOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes futureCorePulse {

    0%,100% {
        transform: scale(.88);
        opacity: .65;
    }

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

.future-technologies .future-right img {

    position: relative;

    z-index: 3;

    width: 92%;
    max-width: 650px;
    height: auto;

    object-fit: contain;

    filter:
        saturate(1.08)
        contrast(1.06)
        drop-shadow(0 0 22px rgba(57,191,255,.20));

    transition:
        transform .6s ease,
        filter .6s ease;
}

.future-technologies .future-right:hover img {

    transform: scale(1.035);

    filter:
        saturate(1.15)
        contrast(1.08)
        drop-shadow(0 0 34px rgba(57,191,255,.28));
}


/* =========================================================
   FUTURE CARDS
   ========================================================= */

.future-technologies .future-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}


/* blue intelligence cards */

.future-technologies .future-card {

    position: relative;

    min-height: 220px;

    padding: 28px 25px;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.22) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,28,39,.78),
            rgba(3,11,17,.88)
        ) !important;

    box-shadow:
        0 0 18px rgba(57,191,255,.045),
        inset 0 1px 0 rgba(121,221,255,.12),
        inset 0 0 28px rgba(57,191,255,.025) !important;

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


/* animated top signal */

.future-technologies .future-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: -40%;

    width: 180%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.25),
            var(--future-blue),
            rgba(121,221,255,.35),
            transparent
        );

    animation:
        futureCardScan 5.5s linear infinite;
}

@keyframes futureCardScan {

    from {
        transform: translateX(-30%);
        opacity: .25;
    }

    50% {
        opacity: 1;
    }

    to {
        transform: translateX(30%);
        opacity: .25;
    }
}


/* small blue intelligence field */

.future-technologies .future-card::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -55px;
    bottom: -55px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.13),
            transparent 70%
        );

    filter: blur(5px);
}

.future-technologies .future-card:hover {

    transform: translateY(-8px);

    border-color: rgba(57,191,255,.48) !important;

    box-shadow:
        0 0 28px rgba(57,191,255,.10),
        0 18px 40px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(121,221,255,.20);
}


/* =========================================================
   ICONS
   ========================================================= */

.future-technologies .future-icon {

    width: 48px;
    height: 48px;

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

    margin-bottom: 18px;

    border-radius: 50%;

    color: var(--future-cyan);

    border: 1px solid rgba(57,191,255,.38);

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.14),
            rgba(6,18,27,.72)
        );

    box-shadow:
        0 0 16px rgba(57,191,255,.12),
        inset 0 0 12px rgba(57,191,255,.06);
}

.future-technologies .future-card h3 {

    color: var(--future-cyan) !important;

    text-shadow:
        0 0 9px rgba(57,191,255,.16);
}

.future-technologies .future-card p {

    color: rgba(214,231,238,.67) !important;

    line-height: 1.75;
}


/* =========================================================
   ROADMAP
   ========================================================= */

.future-technologies .future-roadmap {

    position: relative;

    margin-top: 45px;

    padding: 42px;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.27) !important;

    background:
        linear-gradient(
            105deg,
            rgba(57,191,255,.075),
            rgba(7,20,29,.76),
            rgba(3,9,14,.88)
        ) !important;

    box-shadow:
        0 0 32px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(121,221,255,.13);
}

.future-technologies .future-roadmap::before {

    content: "";

    position: absolute;

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

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--future-blue),
            var(--future-cyan),
            transparent
        );

    box-shadow:
        0 0 15px rgba(57,191,255,.35);
}

.future-technologies .future-roadmap h2 {

    color: var(--future-cyan) !important;
}

.future-technologies .future-roadmap p {

    color: rgba(216,233,240,.68) !important;

    line-height: 1.85;
}


/* =========================================================
   FINAL VISION
   ========================================================= */

.future-technologies .future-vision {

    position: relative;

    margin-top: 25px;

    padding: 48px;

    text-align: center;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.30) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.09),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(5,18,27,.86),
            rgba(2,8,13,.94)
        ) !important;

    box-shadow:
        0 0 38px rgba(57,191,255,.07),
        inset 0 1px 0 rgba(121,221,255,.15);
}

.future-technologies .future-vision::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 240px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--future-blue),
            var(--future-cyan),
            var(--future-blue),
            transparent
        );

    box-shadow:
        0 0 16px rgba(57,191,255,.40);
}

.future-technologies .future-vision h2 {

    color: var(--future-cyan) !important;

    text-shadow:
        0 0 14px rgba(57,191,255,.28),
        0 0 32px rgba(57,191,255,.10);
}

.future-technologies .future-vision p {

    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(216,233,240,.70) !important;

    line-height: 1.85;
}


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

.future-technologies .btn-primary {

    background:
        linear-gradient(
            110deg,
            #168CFF,
            #39BFFF,
            #79DDFF
        ) !important;

    color: #021018 !important;

    box-shadow:
        0 0 20px rgba(57,191,255,.24),
        0 0 42px rgba(57,191,255,.08);
}

.future-technologies .btn-secondary {

    color: var(--future-cyan) !important;

    border-color:
        rgba(57,191,255,.42) !important;

    box-shadow:
        0 0 16px rgba(57,191,255,.07);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .future-technologies .future-hero {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 35px;
    }

    .future-technologies .future-grid {

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


@media (max-width: 700px) {

    .future-technologies .future-hero {

        padding: 25px 20px;
    }

    .future-technologies .future-right {

        min-height: 270px;
    }

    .future-technologies .future-grid {

        grid-template-columns: 1fr;
    }

    .future-technologies .future-card {

        min-height: 185px;
    }

    .future-technologies .future-roadmap,
    .future-technologies .future-vision {

        padding: 30px 22px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .future-technologies::after,
    .future-technologies .future-right::before,
    .future-technologies .future-right::after,
    .future-technologies .future-card::before {

        animation: none !important;
    }

    .future-technologies .future-card,
    .future-technologies .future-right img {

        transition: none !important;
    }
   }
























/* =========================================================
   ARS FINAL SECTIONS
   ROADMAP × VISION × FINAL CTA
   ========================================================= */


/* =========================================================
   01 — ENGINEERING ROADMAP
   PRECISION / PROGRESSION / ENGINEERING
   ========================================================= */

.engineering-roadmap {

    --road-bronze: #B98255;
    --road-bronze-deep: #8F603F;
    --road-blue: #39BFFF;
    --road-cyan: #79DDFF;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(57,191,255,.065),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #03070B,
            #06121B 52%,
            #03070B
        );
}


/* engineering grid */

.engineering-roadmap::before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: -2;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 99px,
            rgba(57,191,255,.018) 100px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 99px,
            rgba(185,130,85,.012) 100px
        );
}


/* central engineering field */

.engineering-roadmap::after {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.055),
            transparent 68%
        );

    filter: blur(15px);

    pointer-events: none;
    z-index: -1;

    animation: roadmapField 8s ease-in-out infinite;
}

@keyframes roadmapField {

    0%,100% {
        transform: translate(-50%,-50%) scale(.94);
        opacity: .55;
    }

    50% {
        transform: translate(-50%,-50%) scale(1.06);
        opacity: .9;
    }
}


/* heading */

.engineering-roadmap .section-label {

    color: var(--road-bronze) !important;

    text-shadow:
        0 0 9px rgba(185,130,85,.28);
}

.engineering-roadmap .section-heading h2 {

    color: #E8C39A !important;

    text-shadow:
        0 0 12px rgba(185,130,85,.18),
        0 0 30px rgba(57,191,255,.06);
}

.engineering-roadmap .section-heading::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,130,85,.75),
            rgba(57,191,255,.95),
            rgba(185,130,85,.75),
            transparent
        ) !important;

    box-shadow:
        0 0 12px rgba(57,191,255,.18);
}


/* timeline */

.engineering-roadmap .roadmap-timeline {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 16px;
}


/* horizontal intelligence line */

.engineering-roadmap .roadmap-timeline::before {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 29px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,130,85,.6),
            rgba(57,191,255,.9),
            rgba(185,130,85,.6),
            transparent
        );

    box-shadow:
        0 0 10px rgba(57,191,255,.18);

    z-index: 0;
}


/* cards */

.engineering-roadmap .roadmap-item {

    position: relative;

    min-height: 285px;

    padding: 58px 25px 28px;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.18) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,26,36,.78),
            rgba(4,10,15,.90)
        ) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(121,221,255,.10);

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


/* phase node */

.engineering-roadmap .roadmap-item::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 22px;

    width: 14px;
    height: 14px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #E8C39A 0%,
            var(--road-bronze) 38%,
            var(--road-blue) 68%,
            transparent 72%
        );

    box-shadow:
        0 0 10px rgba(185,130,85,.55),
        0 0 24px rgba(57,191,255,.28);

    z-index: 3;

    animation: roadmapNode 4s ease-in-out infinite;
}

.engineering-roadmap .roadmap-item:nth-child(2)::before {
    animation-delay: .8s;
}

.engineering-roadmap .roadmap-item:nth-child(3)::before {
    animation-delay: 1.6s;
}

.engineering-roadmap .roadmap-item:nth-child(4)::before {
    animation-delay: 2.4s;
}

@keyframes roadmapNode {

    0%,100% {
        box-shadow:
            0 0 8px rgba(185,130,85,.45),
            0 0 18px rgba(57,191,255,.16);
    }

    50% {
        box-shadow:
            0 0 14px rgba(185,130,85,.75),
            0 0 32px rgba(57,191,255,.35);
    }
}


/* moving phase signal */

.engineering-roadmap .roadmap-item::after {

    content: "";

    position: absolute;

    left: -30%;
    top: 0;

    width: 30%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--road-cyan),
            transparent
        );

    box-shadow:
        0 0 12px rgba(57,191,255,.35);

    animation: roadmapScan 5s linear infinite;
}

@keyframes roadmapScan {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(430%);
    }
}


.engineering-roadmap .roadmap-item:hover {

    transform: translateY(-8px);

    border-color:
        rgba(57,191,255,.42) !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.32),
        0 0 25px rgba(57,191,255,.08),
        inset 0 1px 0 rgba(121,221,255,.18);
}


.engineering-roadmap .roadmap-year {

    color: var(--road-blue);

    font-size: .72rem;
    letter-spacing: .22em;
    font-weight: 700;

    text-shadow:
        0 0 9px rgba(57,191,255,.22);
}

.engineering-roadmap .roadmap-item h3 {

    color: var(--road-bronze-light, #E8C39A) !important;

    margin-top: 15px;
}

.engineering-roadmap .roadmap-item p {

    color: rgba(215,231,238,.67) !important;

    line-height: 1.78;
}


/* roadmap message */

.engineering-roadmap .roadmap-message {

    position: relative;

    margin-top: 35px;

    padding: 38px 42px;

    border: 1px solid rgba(185,130,85,.22) !important;

    background:
        linear-gradient(
            105deg,
            rgba(185,130,85,.065),
            rgba(57,191,255,.045),
            rgba(3,9,14,.82)
        ) !important;

    box-shadow:
        0 0 30px rgba(185,130,85,.045),
        inset 0 1px 0 rgba(232,195,154,.10);
}

.engineering-roadmap .roadmap-message h2 {

    color: #E8C39A !important;
}

.engineering-roadmap .roadmap-message p {

    color: rgba(215,231,238,.68) !important;
    line-height: 1.85;
}


/* =========================================================
   02 — OUR VISION
   HERITAGE / HUMAN / PURPOSE
   ========================================================= */

.ars-vision {

    --vision-bronze: #B98255;
    --vision-bronze-light: #E8C39A;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 25% 45%,
            rgba(185,130,85,.075),
            transparent 32%
        ),
        radial-gradient(
            circle at 78% 60%,
            rgba(57,191,255,.045),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #03070B,
            #0A1217 52%,
            #03070B
        );
}


/* heritage atmosphere */

.ars-vision::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -260px;
    top: 35%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185,130,85,.09),
            transparent 68%
        );

    filter: blur(20px);

    pointer-events: none;
    z-index: -1;

    animation: visionBreath 9s ease-in-out infinite;
}

@keyframes visionBreath {

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

    50% {
        transform: scale(1.07);
        opacity: .9;
    }
}


/* heading */

.ars-vision .section-label {

    color: var(--vision-bronze) !important;

    text-shadow:
        0 0 9px rgba(185,130,85,.28);
}

.ars-vision .section-heading h2 {

    color: var(--vision-bronze-light) !important;

    text-shadow:
        0 0 12px rgba(185,130,85,.18),
        0 0 30px rgba(57,191,255,.045);
}

.ars-vision .section-heading p {

    color: rgba(224,229,229,.74) !important;
}

.ars-vision .section-heading::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143,96,63,.7),
            rgba(185,130,85,1),
            rgba(57,191,255,.55),
            rgba(185,130,85,.65),
            transparent
        ) !important;
}


/* vision cards */

.ars-vision .vision-layout {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 17px;
}


.ars-vision .vision-card {

    position: relative;

    min-height: 230px;

    padding: 32px 27px;

    border: 1px solid rgba(185,130,85,.20) !important;

    background:
        linear-gradient(
            145deg,
            rgba(25,20,17,.62),
            rgba(6,12,16,.82)
        ) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(232,195,154,.09);

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


.ars-vision .vision-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 55px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--vision-bronze),
            var(--road-blue, #39BFFF),
            transparent
        );

    box-shadow:
        0 0 10px rgba(185,130,85,.25);
}


.ars-vision .vision-card:hover {

    transform:
        translateY(-8px)
        rotateX(1deg);

    border-color:
        rgba(185,130,85,.42) !important;

    box-shadow:
        0 22px 45px rgba(0,0,0,.30),
        0 0 25px rgba(185,130,85,.07);
}


.ars-vision .vision-card h3 {

    color: var(--vision-bronze-light) !important;

    margin-bottom: 16px;
}

.ars-vision .vision-card p {

    color: rgba(218,226,229,.68) !important;

    line-height: 1.82;
}


/* final quote */

.ars-vision .vision-quote {

    position: relative;

    margin-top: 30px;

    padding: 48px 35px;

    text-align: center;

    overflow: hidden;

    border: 1px solid rgba(185,130,85,.28) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(185,130,85,.07),
            transparent 58%
        ),
        linear-gradient(
            135deg,
            rgba(20,17,14,.72),
            rgba(4,10,14,.88)
        ) !important;

    box-shadow:
        0 0 35px rgba(185,130,85,.055),
        inset 0 1px 0 rgba(232,195,154,.13);
}

.ars-vision .vision-quote::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 220px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vision-bronze),
            #39BFFF,
            var(--vision-bronze),
            transparent
        );

    box-shadow:
        0 0 13px rgba(185,130,85,.32);
}

.ars-vision .vision-quote h2 {

    color: var(--vision-bronze-light) !important;

    text-shadow:
        0 0 13px rgba(185,130,85,.20);
}

.ars-vision .vision-quote p {

    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(220,228,230,.68) !important;

    line-height: 1.85;
}


/* =========================================================
   03 — FINAL CTA
   FINAL GATE / ARS INVITATION
   ========================================================= */

.arsbrain-cta {

    --cta-blue: #39BFFF;
    --cta-cyan: #79DDFF;
    --cta-bronze: #B98255;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-top: 70px;
    padding-bottom: 90px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(57,191,255,.11),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #02070B,
            #06121B 55%,
            #02070B
        );
}


/* final energy field */

.arsbrain-cta::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 720px;
    height: 720px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.09),
            rgba(57,191,255,.025) 35%,
            transparent 70%
        );

    filter: blur(14px);

    pointer-events: none;
    z-index: -1;

    animation: finalGatePulse 7s ease-in-out infinite;
}

@keyframes finalGatePulse {

    0%,100% {
        transform: translate(-50%,-50%) scale(.92);
        opacity: .55;
    }

    50% {
        transform: translate(-50%,-50%) scale(1.08);
        opacity: 1;
    }
}


/* CTA box */

.arsbrain-cta .cta-box {

    position: relative;

    max-width: 1050px;

    margin: 0 auto;

    padding: 70px 55px;

    text-align: center;

    overflow: hidden;

    border: 1px solid rgba(57,191,255,.32) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.075),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            rgba(7,20,29,.90),
            rgba(3,9,14,.94)
        ) !important;

    box-shadow:
        0 0 35px rgba(57,191,255,.09),
        0 0 90px rgba(57,191,255,.035),
        inset 0 1px 0 rgba(121,221,255,.18);
}


/* top and bottom energy rails */

.arsbrain-cta .cta-box::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 330px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cta-bronze),
            var(--cta-cyan),
            var(--cta-blue),
            transparent
        );

    box-shadow:
        0 0 15px rgba(57,191,255,.40);
}

.arsbrain-cta .cta-box::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 220px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cta-blue),
            var(--cta-bronze),
            transparent
        );

    box-shadow:
        0 0 12px rgba(185,130,85,.28);
}


/* CTA typography */

.arsbrain-cta .section-label {

    color: var(--cta-blue) !important;

    text-shadow:
        0 0 9px rgba(57,191,255,.40);
}

.arsbrain-cta .cta-box h2 {

    color: var(--cta-cyan) !important;

    text-shadow:
        0 0 13px rgba(57,191,255,.28),
        0 0 35px rgba(57,191,255,.10);
}

.arsbrain-cta .cta-box p {

    max-width: 780px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(218,234,241,.72) !important;

    line-height: 1.9;
}


/* CTA buttons */

.arsbrain-cta .btn-primary {

    background:
        linear-gradient(
            110deg,
            #168CFF,
            #39BFFF,
            #79DDFF
        ) !important;

    color: #021018 !important;

    box-shadow:
        0 0 20px rgba(57,191,255,.22),
        0 0 45px rgba(57,191,255,.07);
}

.arsbrain-cta .btn-secondary {

    color: var(--cta-bronze) !important;

    border-color:
        rgba(185,130,85,.42) !important;

    box-shadow:
        0 0 15px rgba(185,130,85,.06);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .engineering-roadmap .roadmap-timeline {

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

    .engineering-roadmap .roadmap-timeline::before {
        display: none;
    }

    .ars-vision .vision-layout {

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


@media (max-width: 700px) {

    .engineering-roadmap .roadmap-timeline {

        grid-template-columns: 1fr;
    }

    .engineering-roadmap .roadmap-item {

        min-height: 220px;

        padding:
            48px 22px 25px;
    }

    .engineering-roadmap .roadmap-message {

        padding: 30px 22px;
    }

    .ars-vision .vision-layout {

        grid-template-columns: 1fr;
    }

    .ars-vision .vision-card {

        min-height: 190px;
    }

    .ars-vision .vision-quote {

        padding: 35px 22px;
    }

    .arsbrain-cta {

        padding-top: 45px;
        padding-bottom: 55px;
    }

    .arsbrain-cta .cta-box {

        padding: 48px 22px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .engineering-roadmap::after,
    .engineering-roadmap .roadmap-item::before,
    .engineering-roadmap .roadmap-item::after,
    .ars-vision::before,
    .arsbrain-cta::before {

        animation: none !important;
    }

    .engineering-roadmap .roadmap-item,
    .ars-vision .vision-card {

        transition: none !important;
    }
}