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


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

:root{

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

    --ars-black:
        #000000;

    --ars-black-deep:
        #010101;

    --ars-black-surface:
        #030405;


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

    --ars-navy-deep:
        #020712;

    --ars-navy:
        #06101f;

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


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

    --ars-gold:
        #c49a4a;

    --ars-gold-light:
        #e6c77a;

    --ars-gold-bright:
        #f3d995;

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


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

    --ars-bronze:
        #8f6238;

    --ars-bronze-light:
        #b4875a;

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


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

    --ars-white:
        #ffffff;

    --ars-white-soft:
        #f4f1e8;

    --ars-white-muted:
        #c8c6bf;


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

    --ars-blue:
        #174b82;

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

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


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

    --ars-red:
        #7d2024;

    --ars-red-light:
        #bd4b4f;

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


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

    --ars-yellow:
        #d7ad3f;

    --ars-yellow-light:
        #f1d36e;

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


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

    --ars-brown:
        #4a3020;

    --ars-brown-light:
        #806047;


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

    --ars-text:
        #f4f1e8;

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

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


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

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

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

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


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

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

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

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

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


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

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

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

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

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

}


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

html{

    width:100%;

    min-height:100%;

    margin:0;

    padding:0;

    background:
        #000000;

    overflow-x:hidden;

    scroll-behavior:smooth;

}


body{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:
        #000000;

    color:
        var(--ars-text);

    overflow-x:hidden;

    font-family:

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

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


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

    box-sizing:
        border-box;

}


img,
video,
svg,
canvas{

    display:
        block;

    max-width:
        100%;

}


a{

    color:
        inherit;

    text-decoration:
        none;

}


button,
a{

    -webkit-tap-highlight-color:
        transparent;

}


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

body{

    position:
        relative;

    background:

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

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

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

        #000000;

}


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

body::before{

    content:"";

    position:
        fixed;

    inset:
        -35%;

    z-index:
        0;

    pointer-events:
        none;

    background:

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

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

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

    animation:

        arsGlobalAtmosphere
        22s
        ease-in-out
        infinite
        alternate;

}


@keyframes arsGlobalAtmosphere{

    0%{

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

        opacity:
            .55;

    }

    50%{

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

        opacity:
            .85;

    }

    100%{

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

        opacity:
            .65;

    }

}


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

section,
header,
footer,
main,
nav{

    position:
        relative;

    max-width:
        100%;

}


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

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        100%;

    overflow:
        hidden;

}


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

.container{

    width:
        min(1400px, 90%);

    max-width:
        100%;

    margin-left:
        auto;

    margin-right:
        auto;

    position:
        relative;

    z-index:
        2;

}


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

section{

    width:
        100%;

    padding:

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

    isolation:
        isolate;

}


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

.section-header{

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    max-width:
        1000px;

    margin:

        0
        auto
        70px;

    text-align:
        center;

}


.section-label{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    padding:

        8px
        18px;

    border:

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

    border-radius:
        999px;

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

    background:

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

    backdrop-filter:
        blur(14px);

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

    box-shadow:

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

    font-size:
        .70rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.section-header h2{

    margin:
        0;

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

    font-size:

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

    line-height:
        1.12;

    letter-spacing:
        -.025em;

}


.section-header p{

    max-width:
        780px;

    margin:

        25px
        auto
        0;

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

    line-height:
        1.9;

}


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

.ars-glass{

    position:
        relative;

    overflow:
        hidden;

    border:

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

    background:

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

    backdrop-filter:

        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(24px)
        saturate(125%);

    box-shadow:

        var(--ars-shadow-black),

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

    transition:

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

        border-color .5s ease,

        box-shadow .5s ease,

        background .5s ease;

}


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

.ars-glass::before{

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

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

    transform:
        translateX(-120%);

    transition:
        transform 1.2s ease;

}


.ars-glass:hover::before{

    transform:
        translateX(120%);

}


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

.ars-glass:hover{

    transform:
        translateY(-10px);

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

    box-shadow:

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

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

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

}


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

.ars-glass-dark{

    background:

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

}


.ars-glass-navy{

    background:

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

    border-color:

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

}


.ars-glass-gold{

    background:

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

    border-color:

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

}


.ars-glass-bronze{

    background:

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

    border-color:

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

}


.ars-glass-blue{

    background:

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

    border-color:

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

}


.ars-glass-red{

    background:

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

    border-color:

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

}


.ars-glass-bright{

    background:

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

}


.ars-glass-flat{

    box-shadow:

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

}


.ars-glass-floating{

    box-shadow:

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

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

}


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

.gold-text{

    background:

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

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


h1,
h2,
h3,
h4{

    text-wrap:
        balance;

}


h1,
h2,
h3{

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

}


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

.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:

        0
        28px;

    border-radius:
        999px;

    font-size:
        .84rem;

    font-weight:
        600;

    letter-spacing:
        .04em;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease,

        border-color .4s ease;

}


.btn-primary{

    color:
        #090909;

    background:

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

    box-shadow:

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

}


.btn-secondary{

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

    border:

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

    background:

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

    backdrop-filter:
        blur(14px);

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

}


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

    transform:
        translateY(-4px);

    box-shadow:

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

}


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

.ars-scroll-line{

    position:
        fixed;

    right:
        24px;

    top:
        50%;

    width:
        2px;

    height:
        100px;

    transform:
        translateY(-50%);

    z-index:
        100;

    pointer-events:
        none;

    background:

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

    opacity:
        .65;

    animation:

        arsScrollGlow
        2.5s
        ease-in-out
        infinite;

}


@keyframes arsScrollGlow{

    0%,
    100%{

        opacity:
            .30;

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

    }

    50%{

        opacity:
            1;

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

    }

}


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

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

    outline:

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

    outline-offset:
        5px;

}


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

@media (max-width:1024px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            100px 0;

    }

}


@media (max-width:768px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            80px 0;

    }

    .section-header{

        margin-bottom:
            50px;

    }

    .section-header h2{

        font-size:

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

    }

    .btn-primary,
    .btn-secondary{

        width:
            100%;

    }

}


@media (max-width:480px){

    .container{

        width:
            92%;

    }

    section{

        padding:
            70px 0;

    }

    .section-label{

        font-size:
            .62rem;

        letter-spacing:
            .12em;

    }

}


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

@media (max-width:768px){

    html,
    body{

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;

    }

    .ars-glass{

        max-width:
            100%;

        min-width:
            0;

    }

}


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

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}
/* =========================================================
   ARS ENGINEERING
   FILE: ars-engineering.css
   SECTION 01 — ENGINEERING HERO SYSTEM
   PREMIUM AUTOMOTIVE ENGINEERING HERO
   ========================================================= */


/* =========================================================
   01.1 — ENGINEERING HERO BASE
   ========================================================= */

.engineering-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    isolation:isolate;

}


/* =========================================================
   01.2 — ENGINEERING HERO BACKGROUND
   ========================================================= */

.engineering-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-5;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(184,137,63,.18),
            transparent 24%
        ),

        radial-gradient(
            circle at 82% 20%,
            rgba(255,255,255,.045),
            transparent 26%
        ),

        radial-gradient(
            circle at 12% 80%,
            rgba(184,137,63,.08),
            transparent 28%
        );

    pointer-events:none;

}


/* =========================================================
   01.3 — ENGINEERING TECH GRID
   ========================================================= */

.engineering-hero::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:-4;

    opacity:.22;

    background-image:

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

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

    background-size:

        72px 72px,
        72px 72px;

    mask-image:

        linear-gradient(
            to bottom,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%
        );

    animation:

        engineering-grid-drift
        28s linear infinite;

    pointer-events:none;

}


/* =========================================================
   01.4 — ENGINEERING HERO CONTAINER
   ========================================================= */

.engineering-hero .container{

    position:relative;

    width:100%;

    z-index:3;

}


/* =========================================================
   01.5 — ENGINEERING HERO CONTENT WRAPPER
   ========================================================= */

.engineering-hero-wrapper{

    position:relative;

    min-height:100vh;

    display:grid;

    grid-template-columns:

        minmax(0,1.05fr)
        minmax(420px,.95fr);

    align-items:center;

    gap:clamp(40px,6vw,110px);

    padding:

        120px
        0
        90px;

}


/* =========================================================
   01.6 — ENGINEERING HERO CONTENT
   ========================================================= */

.engineering-hero-content{

    position:relative;

    z-index:5;

    max-width:760px;

}


/* =========================================================
   01.7 — ENGINEERING HERO LABEL
   ========================================================= */

.engineering-hero-content .section-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    position:relative;

    letter-spacing:.22em;

    font-size:.72rem;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:24px;

}


/* =========================================================
   01.8 — ENGINEERING HERO LABEL SIGNAL
   ========================================================= */

.engineering-hero-content .section-label::before{

    content:"";

    width:32px;

    height:1px;

    position:relative;

    display:block;

    background:

        linear-gradient(
            90deg,
            transparent,
            currentColor
        );

    box-shadow:

        0 0 10px currentColor;

}


/* =========================================================
   01.9 — ENGINEERING HERO TITLE
   ========================================================= */

.engineering-hero-content h1{

    position:relative;

    margin:0;

    max-width:900px;

    font-size:

        clamp(
            3.2rem,
            7vw,
            7.8rem
        );

    line-height:.92;

    letter-spacing:-.055em;

    font-weight:700;

    text-wrap:balance;

}


/* =========================================================
   01.10 — ENGINEERING HERO TITLE TECH GLOW
   ========================================================= */

.engineering-hero-content h1::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-22px;

    width:120px;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.9),
            transparent
        );

    box-shadow:

        0 0 18px
        rgba(184,137,63,.45);

    animation:

        engineering-title-pulse
        4s ease-in-out infinite;

}


/* =========================================================
   01.11 — ENGINEERING HERO DESCRIPTION
   ========================================================= */

.engineering-hero-content p{

    max-width:680px;

    margin:

        46px
        0
        0;

    font-size:

        clamp(
            1rem,
            1.3vw,
            1.18rem
        );

    line-height:1.9;

    opacity:.78;

}


/* =========================================================
   01.12 — ENGINEERING HERO ACTIONS
   ========================================================= */

.engineering-hero .hero-buttons{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:16px;

    margin-top:36px;

}


/* =========================================================
   01.13 — ENGINEERING HERO VISUAL
   ========================================================= */

.engineering-hero-visual{

    position:relative;

    min-height:

        clamp(
            420px,
            48vw,
            720px
        );

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1400px;

}


/* =========================================================
   01.14 — ENGINEERING HERO VISUAL IMAGE
   ========================================================= */

.engineering-hero-visual img{

    position:relative;

    z-index:4;

    width:min(
        100%,
        680px
    );

    height:auto;

    object-fit:contain;

    filter:

        drop-shadow(
            0 0 35px
            rgba(184,137,63,.16)
        );

    transform:

        translateZ(40px);

    animation:

        engineering-hero-float
        7s ease-in-out infinite;

}


/* =========================================================
   01.15 — ENGINEERING HERO CORE GLOW
   ========================================================= */

.engineering-hero-visual::before{

    content:"";

    position:absolute;

    width:

        clamp(
            240px,
            34vw,
            520px
        );

    aspect-ratio:1;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(184,137,63,.22),
            rgba(184,137,63,.07) 35%,
            transparent 70%
        );

    filter:blur(8px);

    animation:

        engineering-core-breathe
        5s ease-in-out infinite;

}


/* =========================================================
   01.16 — ENGINEERING HERO ORBIT RING
   ========================================================= */

.engineering-hero-visual::after{

    content:"";

    position:absolute;

    width:

        clamp(
            280px,
            38vw,
            600px
        );

    aspect-ratio:1;

    border:

        1px solid
        rgba(184,137,63,.18);

    border-radius:50%;

    transform:

        rotateX(68deg)
        rotateZ(-18deg);

    box-shadow:

        0 0 35px
        rgba(184,137,63,.06);

    animation:

        engineering-orbit-rotate
        18s linear infinite;

}


/* =========================================================
   01.17 — ENGINEERING HERO HUD FRAME
   ========================================================= */

.engineering-hero .hero-visual-hud{

    position:absolute;

    inset:

        8%
        4%;

    z-index:2;

    border:

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

    pointer-events:none;

}


/* =========================================================
   01.18 — ENGINEERING HERO HUD CORNERS
   ========================================================= */

.engineering-hero .hero-visual-hud::before,
.engineering-hero .hero-visual-hud::after{

    content:"";

    position:absolute;

    width:42px;

    height:42px;

    border-color:

        rgba(184,137,63,.55);

    border-style:solid;

}


.engineering-hero .hero-visual-hud::before{

    top:-1px;

    left:-1px;

    border-width:

        1px
        0
        0
        1px;

}


.engineering-hero .hero-visual-hud::after{

    right:-1px;

    bottom:-1px;

    border-width:

        0
        1px
        1px
        0;

}


/* =========================================================
   01.19 — ENGINEERING HERO SCAN LINE
   ========================================================= */

.engineering-hero .hero-scan-line{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    z-index:6;

    opacity:.55;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.8),
            transparent
        );

    box-shadow:

        0 0 16px
        rgba(184,137,63,.45);

    animation:

        engineering-scan
        7s ease-in-out infinite;

    pointer-events:none;

}


/* =========================================================
   01.20 — ENGINEERING HERO DATA MARKERS
   ========================================================= */

.engineering-hero .hero-data-marker{

    position:absolute;

    display:flex;

    align-items:center;

    gap:9px;

    z-index:7;

    padding:

        7px
        10px;

    font-size:.62rem;

    letter-spacing:.16em;

    text-transform:uppercase;

    white-space:nowrap;

    opacity:.62;

    background:

        rgba(255,255,255,.025);

    border:

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

    backdrop-filter:

        blur(10px);

    -webkit-backdrop-filter:

        blur(10px);

}


/* =========================================================
   01.21 — ENGINEERING HERO DATA MARKER DOT
   ========================================================= */

.engineering-hero .hero-data-marker::before{

    content:"";

    width:6px;

    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:

        currentColor;

    box-shadow:

        0 0 10px
        currentColor;

    animation:

        engineering-marker-pulse
        2.4s ease-in-out infinite;

}


/* =========================================================
   01.22 — ENGINEERING HERO DATA MARKER POSITIONS
   ========================================================= */

.engineering-hero .hero-data-marker.marker-one{

    top:18%;

    right:8%;

}


.engineering-hero .hero-data-marker.marker-two{

    top:52%;

    left:2%;

}


.engineering-hero .hero-data-marker.marker-three{

    right:4%;

    bottom:18%;

}


/* =========================================================
   01.23 — ENGINEERING HERO NETWORK POINTS
   ========================================================= */

.engineering-hero .hero-network-point{

    position:absolute;

    width:8px;

    height:8px;

    z-index:7;

    border-radius:50%;

    background:

        rgba(184,137,63,.9);

    box-shadow:

        0 0 0 5px
        rgba(184,137,63,.06),

        0 0 20px
        rgba(184,137,63,.55);

    animation:

        engineering-network-pulse
        3s ease-in-out infinite;

}


/* =========================================================
   01.24 — ENGINEERING HERO NETWORK POINT POSITIONS
   ========================================================= */

.engineering-hero .network-point-one{

    top:25%;

    left:16%;

}


.engineering-hero .network-point-two{

    top:38%;

    right:18%;

    animation-delay:

        1s;

}


.engineering-hero .network-point-three{

    bottom:24%;

    left:25%;

    animation-delay:

        2s;

}


/* =========================================================
   01.25 — ENGINEERING HERO LIGHT SWEEP
   ========================================================= */

.engineering-hero .hero-light-sweep{

    position:absolute;

    top:-20%;

    left:-35%;

    width:25%;

    height:140%;

    z-index:8;

    opacity:.12;

    transform:

        rotate(18deg);

    background:

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

    filter:

        blur(18px);

    animation:

        engineering-light-sweep
        12s ease-in-out infinite;

    pointer-events:none;

}


/* =========================================================
   01.26 — ENGINEERING HERO BOTTOM FADE
   ========================================================= */

.engineering-hero .hero-bottom-fade{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    z-index:9;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.65)
        );

    pointer-events:none;

}


/* =========================================================
   01.27 — ENGINEERING HERO ANIMATIONS
   ========================================================= */

@keyframes engineering-grid-drift{

    0%{

        background-position:
            0 0,
            0 0;

    }

    100%{

        background-position:
            72px 72px,
            72px 72px;

    }

}


@keyframes engineering-hero-float{

    0%,
    100%{

        transform:

            translateY(0)
            translateZ(40px);

    }

    50%{

        transform:

            translateY(-14px)
            translateZ(60px);

    }

}


@keyframes engineering-core-breathe{

    0%,
    100%{

        transform:scale(.92);

        opacity:.72;

    }

    50%{

        transform:scale(1.06);

        opacity:1;

    }

}


@keyframes engineering-orbit-rotate{

    from{

        transform:

            rotateX(68deg)
            rotateZ(-18deg);

    }

    to{

        transform:

            rotateX(68deg)
            rotateZ(342deg);

    }

}


@keyframes engineering-title-pulse{

    0%,
    100%{

        opacity:.45;

        transform:scaleX(.75);

        transform-origin:left;

    }

    50%{

        opacity:1;

        transform:scaleX(1);

        transform-origin:left;

    }

}


@keyframes engineering-scan{

    0%{

        transform:translateY(-10%);

        opacity:0;

    }

    15%{

        opacity:.7;

    }

    80%{

        opacity:.7;

    }

    100%{

        transform:translateY(110vh);

        opacity:0;

    }

}


@keyframes engineering-marker-pulse{

    0%,
    100%{

        opacity:.35;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.2);

    }

}


@keyframes engineering-network-pulse{

    0%,
    100%{

        transform:scale(.8);

        opacity:.45;

    }

    50%{

        transform:scale(1.35);

        opacity:1;

    }

}


@keyframes engineering-light-sweep{

    0%{

        left:-35%;

        opacity:0;

    }

    20%{

        opacity:.12;

    }

    65%{

        opacity:.12;

    }

    100%{

        left:120%;

        opacity:0;

    }

}


/* =========================================================
   01.28 — ENGINEERING HERO RESPONSIVE
   ========================================================= */

@media (max-width:1100px){

    .engineering-hero-wrapper{

        grid-template-columns:

            1fr;

        text-align:center;

        padding-top:150px;

    }

    .engineering-hero-content{

        margin-inline:auto;

    }

    .engineering-hero-content .section-label{

        justify-content:center;

    }

    .engineering-hero-content h1::after{

        left:50%;

        transform:

            translateX(-50%);

    }

    .engineering-hero-content p{

        margin-inline:auto;

    }

    .engineering-hero .hero-buttons{

        justify-content:center;

    }

    .engineering-hero-visual{

        min-height:520px;

        margin-top:-40px;

    }

}


@media (max-width:700px){

    .engineering-hero-wrapper{

        min-height:auto;

        padding:

            130px
            0
            70px;

        gap:20px;

    }

    .engineering-hero-content h1{

        font-size:

            clamp(
                2.8rem,
                14vw,
                5rem
            );

    }

    .engineering-hero-content p{

        font-size:.95rem;

        line-height:1.8;

    }

    .engineering-hero-visual{

        min-height:360px;

    }

    .engineering-hero .hero-visual-hud{

        inset:8% 0;

    }

    .engineering-hero .hero-data-marker{

        font-size:.5rem;

        letter-spacing:.1em;

    }

    .engineering-hero .marker-two{

        left:0;

    }

    .engineering-hero .marker-three{

        right:0;

    }

}


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

    .engineering-hero::after,
    .engineering-hero-visual img,
    .engineering-hero-visual::before,
    .engineering-hero-visual::after,
    .engineering-hero-content h1::after,
    .engineering-hero .hero-scan-line,
    .engineering-hero .hero-light-sweep,
    .engineering-hero .hero-network-point,
    .engineering-hero .hero-data-marker::before{

        animation:none;

    }

        }

/* =========================================================
   ARS ENGINEERING
   ENGINEERING PAGE — DEDICATED CSS
   SECTION 02 — ENGINEERING PHILOSOPHY
   PREMIUM TECHNICAL GLASS SYSTEM
   ========================================================= */


/* =========================================================
   02.1 — ENGINEERING PHILOSOPHY SECTION
   ========================================================= */

.engineering-philosophy{
    position:relative;
    padding:clamp(100px,10vw,180px) 0;
    overflow:hidden;
    isolation:isolate;
}

.engineering-philosophy::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(184,137,63,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(255,255,255,.035),
            transparent 30%
        );
    pointer-events:none;
}

.engineering-philosophy::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.16;
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
    background-size:70px 70px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
    pointer-events:none;
}


/* =========================================================
   02.2 — PHILOSOPHY GRID
   ========================================================= */

.philosophy-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,2vw,32px);
    margin-top:clamp(50px,6vw,90px);
}


/* =========================================================
   02.3 — TECHNICAL GLASS CARD
   ========================================================= */

.philosophy-card{
    position:relative;
    min-height:340px;
    padding:clamp(28px,3vw,48px);
    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018)
        );

    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,255,255,.025),
        0 20px 70px rgba(0,0,0,.20);

    transform:translateZ(0);
    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        border-color .45s ease,
        box-shadow .55s ease,
        background .45s ease;
}

.philosophy-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        linear-gradient(
            135deg,
            rgba(184,137,63,.14),
            transparent 30%,
            transparent 70%,
            rgba(255,255,255,.035)
        );

    opacity:.55;
    transition:opacity .5s ease;
}

.philosophy-card::after{
    content:"";
    position:absolute;
    top:-20%;
    left:-60%;
    width:35%;
    height:140%;

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

    transform:rotate(18deg);
    opacity:0;
    transition:
        left .8s ease,
        opacity .4s ease;
    pointer-events:none;
}

.philosophy-card:hover{
    transform:
        translateY(-10px)
        perspective(900px)
        rotateX(1deg);

    border-color:rgba(184,137,63,.42);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(184,137,63,.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 25px 90px rgba(0,0,0,.32),
        0 0 45px rgba(184,137,63,.08);
}

.philosophy-card:hover::before{
    opacity:1;
}

.philosophy-card:hover::after{
    left:125%;
    opacity:1;
}


/* =========================================================
   02.4 — ENGINEERING NUMBER / ACCENT SYSTEM
   ========================================================= */

.philosophy-number{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-bottom:34px;

    color:rgba(184,137,63,.92);

    font-family:
        "Inter",
        "Montserrat",
        sans-serif;

    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
}

.philosophy-number::before{
    content:"";
    width:34px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.95),
            transparent
        );

    box-shadow:
        0 0 10px rgba(184,137,63,.35);
}

.philosophy-number::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;

    width:18px;
    height:1px;

    background:rgba(255,255,255,.22);
}


/* =========================================================
   02.5 — TECHNICAL CARD ICON / NODE
   ========================================================= */

.philosophy-icon{
    position:relative;

    width:62px;
    height:62px;

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

    margin-bottom:28px;

    border:1px solid rgba(184,137,63,.28);
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(184,137,63,.10),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 0 20px rgba(184,137,63,.04),
        0 0 25px rgba(184,137,63,.04);

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

.philosophy-icon::before,
.philosophy-icon::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

.philosophy-icon::before{
    width:7px;
    height:7px;
    background:rgba(184,137,63,.95);
    box-shadow:
        0 0 8px rgba(184,137,63,.8),
        0 0 18px rgba(184,137,63,.35);
}

.philosophy-icon::after{
    inset:10px;
    border:1px solid rgba(184,137,63,.18);
    animation:
        engineering-pulse-ring 3s ease-in-out infinite;
}

.philosophy-card:hover .philosophy-icon{
    transform:scale(1.06);
    border-color:rgba(184,137,63,.58);
    box-shadow:
        inset 0 0 25px rgba(184,137,63,.07),
        0 0 30px rgba(184,137,63,.10);
}


/* =========================================================
   02.6 — PHILOSOPHY TYPOGRAPHY
   ========================================================= */

.philosophy-card h3{
    margin:0 0 16px;

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

    font-size:clamp(20px,1.7vw,27px);
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.02em;

    transition:
        color .4s ease,
        transform .4s ease;
}

.philosophy-card p{
    max-width:48ch;
    margin:0;

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

    font-size:15px;
    line-height:1.85;
    letter-spacing:.01em;

    transition:
        color .4s ease;
}

.philosophy-card:hover h3{
    color:rgba(255,255,255,1);
    transform:translateX(3px);
}

.philosophy-card:hover p{
    color:rgba(255,255,255,.72);
}


/* =========================================================
   02.7 — MICRO INTERACTION / TECHNICAL CORNERS
   ========================================================= */

.philosophy-card .technical-corner{
    position:absolute;
    width:18px;
    height:18px;
    opacity:.45;
    transition:
        width .4s ease,
        height .4s ease,
        opacity .4s ease;
}

.philosophy-card .technical-corner::before,
.philosophy-card .technical-corner::after{
    content:"";
    position:absolute;
    background:rgba(184,137,63,.65);
}

.philosophy-card .technical-corner::before{
    width:100%;
    height:1px;
}

.philosophy-card .technical-corner::after{
    width:1px;
    height:100%;
}

.philosophy-card .technical-corner.top-left{
    top:18px;
    left:18px;
}

.philosophy-card .technical-corner.top-right{
    top:18px;
    right:18px;
    transform:rotate(90deg);
}

.philosophy-card .technical-corner.bottom-right{
    bottom:18px;
    right:18px;
    transform:rotate(180deg);
}

.philosophy-card .technical-corner.bottom-left{
    bottom:18px;
    left:18px;
    transform:rotate(270deg);
}

.philosophy-card:hover .technical-corner{
    width:25px;
    height:25px;
    opacity:.85;
}


/* =========================================================
   02.8 — PHILOSOPHY SIGNAL LINE
   ========================================================= */

.philosophy-signal{
    position:absolute;
    right:0;
    bottom:0;

    width:45%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.45),
            transparent
        );

    opacity:.35;
    transition:
        width .6s ease,
        opacity .6s ease;
}

.philosophy-card:hover .philosophy-signal{
    width:70%;
    opacity:.75;
}


/* =========================================================
   02.9 — ENGINEERING PHILOSOPHY FEATURE PANEL
   ========================================================= */

.philosophy-feature{
    position:relative;

    margin-top:clamp(25px,3vw,45px);
    padding:clamp(30px,4vw,60px);

    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    gap:50px;

    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.06),
            rgba(184,137,63,.025),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(255,255,255,.09);
    border-radius:28px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 25px 90px rgba(0,0,0,.22);
}

.philosophy-feature::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(184,137,63,.07) 50%,
            transparent 100%
        );

    animation:
        philosophy-feature-scan 7s ease-in-out infinite;

    pointer-events:none;
}

.philosophy-feature-content{
    position:relative;
    z-index:2;
}

.philosophy-feature-content h3{
    margin:0 0 18px;

    font-size:clamp(24px,2.5vw,38px);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.025em;
}

.philosophy-feature-content p{
    max-width:65ch;
    margin:0;

    color:rgba(255,255,255,.60);
    line-height:1.9;
}


/* =========================================================
   02.10 — PHILOSOPHY FEATURE TECHNICAL VISUAL
   ========================================================= */

.philosophy-visual{
    position:relative;

    min-height:240px;

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

.philosophy-visual::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border:1px solid rgba(184,137,63,.18);
    border-radius:50%;

    box-shadow:
        0 0 50px rgba(184,137,63,.05);

    animation:
        engineering-orbit 14s linear infinite;
}

.philosophy-visual::after{
    content:"";

    position:absolute;

    width:110px;
    height:110px;

    border:1px dashed rgba(255,255,255,.12);
    border-radius:50%;

    animation:
        engineering-orbit-reverse 10s linear infinite;
}

.philosophy-core{
    position:relative;

    width:72px;
    height:72px;

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

    border:1px solid rgba(184,137,63,.55);
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.20),
            rgba(184,137,63,.035) 55%,
            transparent 70%
        );

    box-shadow:
        0 0 25px rgba(184,137,63,.16),
        inset 0 0 20px rgba(184,137,63,.08);

    z-index:3;

    animation:
        engineering-core-pulse 3s ease-in-out infinite;
}

.philosophy-core::before{
    content:"";
    width:10px;
    height:10px;

    border-radius:50%;

    background:rgba(184,137,63,.95);

    box-shadow:
        0 0 10px rgba(184,137,63,.9),
        0 0 30px rgba(184,137,63,.4);
}


/* =========================================================
   02.11 — ANIMATIONS
   ========================================================= */

@keyframes engineering-pulse-ring{
    0%,100%{
        transform:scale(.85);
        opacity:.25;
    }

    50%{
        transform:scale(1.08);
        opacity:.75;
    }
}

@keyframes philosophy-feature-scan{
    0%{
        transform:translateX(-80%);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    50%{
        transform:translateX(80%);
        opacity:.5;
    }

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

@keyframes engineering-orbit{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes engineering-orbit-reverse{
    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }
}

@keyframes engineering-core-pulse{
    0%,100%{
        transform:scale(1);
        box-shadow:
            0 0 25px rgba(184,137,63,.16),
            inset 0 0 20px rgba(184,137,63,.08);
    }

    50%{
        transform:scale(1.06);
        box-shadow:
            0 0 45px rgba(184,137,63,.25),
            inset 0 0 30px rgba(184,137,63,.12);
    }
}


/* =========================================================
   02.12 — RESPONSIVE ENGINEERING PHILOSOPHY
   ========================================================= */

@media (max-width:1100px){

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

    .philosophy-feature{
        grid-template-columns:1fr;
    }

    .philosophy-visual{
        min-height:220px;
    }
}

@media (max-width:700px){

    .engineering-philosophy{
        padding:90px 0;
    }

    .philosophy-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:45px;
    }

    .philosophy-card{
        min-height:auto;
        padding:28px 24px;
        border-radius:20px;
    }

    .philosophy-card:hover{
        transform:translateY(-5px);
    }

    .philosophy-feature{
        padding:28px 22px;
        border-radius:22px;
    }

    .philosophy-visual{
        min-height:190px;
    }

    .philosophy-visual::before{
        width:145px;
        height:145px;
    }

    .philosophy-visual::after{
        width:90px;
        height:90px;
    }

    .philosophy-core{
        width:60px;
        height:60px;
    }
}

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

    .philosophy-card,
    .philosophy-icon,
    .philosophy-feature::before,
    .philosophy-visual::before,
    .philosophy-visual::after,
    .philosophy-core{
        animation:none !important;
        transition:none !important;
    }
    }/* =========================================================
   ARS ENGINEERING
   CSS SPECIALIZED SYSTEM
   SECTION 03 — ENGINEERING INTERFACE
   TECHNICAL UI / NODE SYSTEM / ARCHITECTURE GRID
   ANIMATED NETWORK / PULSE / DATA POINTS / HUD
   ========================================================= */


/* =========================================================
   03.1 — ENGINEERING INTERFACE
   ========================================================= */

.engineering-interface{

    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:
        clamp(90px,8vw,150px)
        0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(184,137,63,.10),
            transparent 38%
        );

}


/* =========================================================
   03.2 — TECHNICAL INTERFACE BACKGROUND
   ========================================================= */

.engineering-interface::before{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.32;

    background-image:
        linear-gradient(
            rgba(184,137,63,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.055) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );

}


/* =========================================================
   03.3 — INTERFACE HEADER
   ========================================================= */

.engineering-interface
.section-heading{

    position:relative;
    z-index:2;

    max-width:900px;

    margin:
        0 auto
        clamp(55px,7vw,100px);

    text-align:center;

}

.engineering-interface
.section-heading h2{

    letter-spacing:
        -.025em;

}

.engineering-interface
.section-heading p{

    max-width:720px;

    margin:
        20px auto 0;

}


/* =========================================================
   03.4 — ENGINEERING HUD FRAME
   ========================================================= */

.engineering-interface-panel{

    position:relative;

    min-height:
        clamp(520px,62vw,780px);

    display:flex;

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

    padding:
        clamp(35px,6vw,90px);

    overflow:hidden;

    border:
        1px solid
        rgba(184,137,63,.22);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    backdrop-filter:
        blur(22px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 70px rgba(184,137,63,.035),
        0 30px 90px rgba(0,0,0,.22);

}


/* =========================================================
   03.5 — HUD CORNER MARKERS
   ========================================================= */

.engineering-interface-panel::before,
.engineering-interface-panel::after{

    content:"";

    position:absolute;

    width:42px;
    height:42px;

    pointer-events:none;

    border-color:
        rgba(184,137,63,.65);

}

.engineering-interface-panel::before{

    top:18px;
    left:18px;

    border-top:1px solid;
    border-left:1px solid;

}

.engineering-interface-panel::after{

    right:18px;
    bottom:18px;

    border-right:1px solid;
    border-bottom:1px solid;

}


/* =========================================================
   03.6 — ARCHITECTURE GRID
   ========================================================= */

.interface-grid{

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.45;

    background-image:
        linear-gradient(
            rgba(184,137,63,.065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.065) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 78%
        );

}


/* =========================================================
   03.7 — TECHNICAL SCAN LINE
   ========================================================= */

.interface-grid::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    height:1px;

    top:-5%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.65),
            transparent
        );

    box-shadow:
        0 0 18px rgba(184,137,63,.32);

    animation:
        engineeringScan
        8s
        linear
        infinite;

}

@keyframes engineeringScan{

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

    10%{
        opacity:1;
    }

    90%{
        opacity:1;
    }

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

}


/* =========================================================
   03.8 — TECHNICAL NODE NETWORK
   ========================================================= */

.interface-network{

    position:relative;

    width:
        min(100%,900px);

    min-height:
        clamp(380px,52vw,620px);

    display:flex;

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

}


/* =========================================================
   03.9 — NETWORK CONNECTION LINES
   ========================================================= */

.interface-network::before{

    content:"";

    position:absolute;

    width:72%;
    height:72%;

    border:
        1px solid
        rgba(184,137,63,.14);

    transform:
        rotate(45deg);

    box-shadow:
        0 0 40px rgba(184,137,63,.025);

}


/* =========================================================
   03.10 — ENGINEERING NODE
   ========================================================= */

.interface-node{

    position:absolute;

    z-index:3;

    display:flex;

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

    width:
        clamp(82px,9vw,120px);

    height:
        clamp(82px,9vw,120px);

    border:
        1px solid
        rgba(184,137,63,.32);

    border-radius:
        50%;

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

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        inset 0 0 25px rgba(184,137,63,.035),
        0 0 35px rgba(184,137,63,.04);

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

}

.interface-node:hover{

    transform:
        scale(1.08);

    border-color:
        rgba(184,137,63,.72);

    box-shadow:
        0 0 35px rgba(184,137,63,.18),
        inset 0 0 28px rgba(184,137,63,.08);

}


/* =========================================================
   03.11 — NODE POSITIONS
   ========================================================= */

.interface-node:nth-child(1){
    top:4%;
    left:50%;
    transform:translateX(-50%);
}

.interface-node:nth-child(2){
    top:50%;
    right:3%;
    transform:translateY(-50%);
}

.interface-node:nth-child(3){
    bottom:4%;
    left:50%;
    transform:translateX(-50%);
}

.interface-node:nth-child(4){
    top:50%;
    left:3%;
    transform:translateY(-50%);
}


/* =========================================================
   03.12 — NODE LABEL
   ========================================================= */

.interface-node span{

    position:absolute;

    top:
        calc(100% + 12px);

    white-space:nowrap;

    font-size:
        10px;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

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

}


/* =========================================================
   03.13 — NODE PULSE
   ========================================================= */

.interface-node::before{

    content:"";

    position:absolute;
    inset:-9px;

    border:
        1px solid
        rgba(184,137,63,.22);

    border-radius:
        inherit;

    animation:
        nodePulse
        3s
        ease-out
        infinite;

}

@keyframes nodePulse{

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

    70%{
        transform:scale(1.18);
        opacity:0;
    }

    100%{
        opacity:0;
    }

}


/* =========================================================
   03.14 — CENTRAL ENGINEERING CORE
   ========================================================= */

.interface-core{

    position:relative;

    z-index:5;

    width:
        clamp(145px,17vw,220px);

    height:
        clamp(145px,17vw,220px);

    display:flex;

    flex-direction:column;

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

    border:
        1px solid
        rgba(184,137,63,.58);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.16),
            rgba(255,255,255,.035) 48%,
            rgba(0,0,0,.18)
        );

    backdrop-filter:
        blur(24px);

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

    box-shadow:
        0 0 45px rgba(184,137,63,.14),
        inset 0 0 45px rgba(184,137,63,.07);

    animation:
        coreBreathing
        4s
        ease-in-out
        infinite;

}

@keyframes coreBreathing{

    0%,
    100%{
        box-shadow:
            0 0 35px rgba(184,137,63,.10),
            inset 0 0 35px rgba(184,137,63,.04);
    }

    50%{
        box-shadow:
            0 0 65px rgba(184,137,63,.22),
            inset 0 0 55px rgba(184,137,63,.10);
    }

}


/* =========================================================
   03.15 — CORE TYPOGRAPHY
   ========================================================= */

.interface-core strong{

    font-size:
        clamp(22px,3vw,38px);

    letter-spacing:
        .12em;

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

}

.interface-core small{

    margin-top:
        8px;

    font-size:
        9px;

    letter-spacing:
        .24em;

    color:
        rgba(184,137,63,.82);

}


/* =========================================================
   03.16 — CONNECTION SYSTEM
   ========================================================= */

.interface-connection{

    position:absolute;

    z-index:1;

    height:1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.18),
            rgba(184,137,63,.55),
            transparent
        );

    overflow:hidden;

}


/* =========================================================
   03.17 — CONNECTION DATA PULSE
   ========================================================= */

.interface-connection::after{

    content:"";

    position:absolute;

    top:-2px;
    left:-20%;

    width:20%;
    height:5px;

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

    filter:
        blur(1px);

    animation:
        dataPulse
        3.2s
        linear
        infinite;

}

@keyframes dataPulse{

    0%{
        left:-20%;
    }

    100%{
        left:110%;
    }

}


/* =========================================================
   03.18 — TECHNICAL DATA POINTS
   ========================================================= */

.interface-data-point{

    position:absolute;

    z-index:4;

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        rgba(184,137,63,.9);

    box-shadow:
        0 0 12px rgba(184,137,63,.75);

    animation:
        dataPointPulse
        2.5s
        ease-in-out
        infinite;

}

@keyframes dataPointPulse{

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

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

}


/* =========================================================
   03.19 — INTERFACE HUD METADATA
   ========================================================= */

.interface-hud{

    position:absolute;

    z-index:6;

    display:flex;

    flex-direction:column;

    gap:7px;

    padding:
        14px 18px;

    border-left:
        1px solid
        rgba(184,137,63,.42);

    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.045),
            transparent
        );

    font-family:
        monospace;

    font-size:
        9px;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

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

}

.interface-hud strong{

    color:
        rgba(184,137,63,.85);

    font-weight:
        500;

}

.interface-hud.top-left{

    top:32px;
    left:32px;

}

.interface-hud.bottom-right{

    right:32px;
    bottom:32px;

    text-align:right;

    border-left:0;

    border-right:
        1px solid
        rgba(184,137,63,.42);

}


/* =========================================================
   03.20 — RESPONSIVE ENGINEERING INTERFACE
   ========================================================= */

@media (max-width:900px){

    .engineering-interface-panel{

        min-height:
            560px;

    }

    .interface-network{

        min-height:
            440px;

    }

    .interface-node{

        width:76px;
        height:76px;

    }

    .interface-node:nth-child(1){
        top:3%;
    }

    .interface-node:nth-child(2){
        right:0;
    }

    .interface-node:nth-child(3){
        bottom:3%;
    }

    .interface-node:nth-child(4){
        left:0;
    }

    .interface-hud{

        font-size:8px;

    }

}


@media (max-width:600px){

    .engineering-interface-panel{

        padding:20px;

        min-height:
            500px;

    }

    .interface-network{

        min-height:
            400px;

        transform:
            scale(.82);

    }

    .interface-node{

        width:64px;
        height:64px;

    }

    .interface-node span{

        font-size:8px;

    }

    .interface-hud.top-left{

        top:18px;
        left:18px;

    }

    .interface-hud.bottom-right{

        right:18px;
        bottom:18px;

    }

}


/* =========================================================
   03.21 — REDUCED MOTION ACCESSIBILITY
   ========================================================= */

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

    .interface-grid::after,
    .interface-node::before,
    .interface-core,
    .interface-connection::after,
    .interface-data-point{

        animation:none;

    }

    }

/* =========================================================
   ARS ENGINEERING
   CSS SPECIALIZED SYSTEM
   SECTION 04 — SYSTEM ARCHITECTURE
   ARS BRAIN CORE / VEHICLE INTERFACE / COMPUTE
   SAFETY / SECURITY / ROSE / ZHR / EXPANSION
   ARCHITECTURE FLOW / ANIMATED NETWORK
   ========================================================= */


/* =========================================================
   04.1 — SYSTEM ARCHITECTURE SECTION
   ========================================================= */

.system-architecture{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(100px,9vw,170px) 0;
}

.system-architecture::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(184,137,63,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255,255,255,.025),
            transparent 25%
        );
}

.system-architecture::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.22;

    background-image:
        linear-gradient(
            rgba(184,137,63,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.045) 1px,
            transparent 1px
        );

    background-size:64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


/* =========================================================
   04.2 — ARCHITECTURE INTRO
   ========================================================= */

.system-architecture .section-heading{
    position:relative;
    z-index:3;
    max-width:900px;
    margin:0 auto clamp(55px,7vw,95px);
    text-align:center;
}

.system-architecture .section-heading p{
    max-width:720px;
    margin:20px auto 0;
}


/* =========================================================
   04.3 — ARCHITECTURE MASTER PANEL
   ========================================================= */

.architecture-panel{
    position:relative;
    min-height:clamp(650px,70vw,900px);
    padding:clamp(35px,5vw,80px);

    overflow:hidden;
    isolation:isolate;

    border:1px solid rgba(184,137,63,.20);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(24px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 90px rgba(184,137,63,.035),
        0 35px 100px rgba(0,0,0,.25);
}


/* =========================================================
   04.4 — ARCHITECTURE TECH GRID
   ========================================================= */

.architecture-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.40;

    background-image:
        linear-gradient(
            rgba(184,137,63,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.055) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 15%,
            transparent 78%
        );
}


/* =========================================================
   04.5 — ARCHITECTURE SCAN
   ========================================================= */

.architecture-grid::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.75),
            transparent
        );

    box-shadow:
        0 0 18px rgba(184,137,63,.35);

    animation:
        architectureScan
        9s
        linear
        infinite;
}

@keyframes architectureScan{
    0%{
        top:-10%;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    88%{
        opacity:1;
    }

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


/* =========================================================
   04.6 — ARCHITECTURE FLOW
   ========================================================= */

.architecture-flow{
    position:relative;
    width:100%;
    min-height:clamp(520px,60vw,760px);
}


/* =========================================================
   04.7 — CENTRAL ARS BRAIN CORE
   ========================================================= */

.architecture-core{
    position:absolute;
    z-index:8;

    top:50%;
    left:50%;

    width:clamp(150px,17vw,230px);
    height:clamp(150px,17vw,230px);

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

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

    border:1px solid rgba(184,137,63,.65);
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.18),
            rgba(255,255,255,.035) 48%,
            rgba(0,0,0,.20) 75%
        );

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

    box-shadow:
        0 0 45px rgba(184,137,63,.16),
        inset 0 0 50px rgba(184,137,63,.07);

    animation:
        architectureCorePulse
        4s
        ease-in-out
        infinite;
}

.architecture-core::before{
    content:"";
    position:absolute;
    inset:-16px;

    border:1px solid rgba(184,137,63,.18);
    border-radius:50%;

    animation:
        architectureOrbit
        12s
        linear
        infinite;
}

.architecture-core::after{
    content:"";
    position:absolute;
    inset:-32px;

    border:1px dashed rgba(255,255,255,.08);
    border-radius:50%;

    animation:
        architectureOrbitReverse
        18s
        linear
        infinite;
}

@keyframes architectureCorePulse{
    0%,
    100%{
        box-shadow:
            0 0 35px rgba(184,137,63,.10),
            inset 0 0 40px rgba(184,137,63,.04);
    }

    50%{
        box-shadow:
            0 0 70px rgba(184,137,63,.24),
            inset 0 0 60px rgba(184,137,63,.11);
    }
}

@keyframes architectureOrbit{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes architectureOrbitReverse{
    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }
}


/* =========================================================
   04.8 — CORE TYPOGRAPHY
   ========================================================= */

.architecture-core strong{
    position:relative;
    z-index:2;

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

    font-size:clamp(24px,3vw,42px);
    font-weight:600;
    letter-spacing:.12em;
}

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

    margin-top:8px;

    color:rgba(184,137,63,.85);

    font-size:9px;
    letter-spacing:.24em;
    text-transform:uppercase;
}


/* =========================================================
   04.9 — ARCHITECTURE MODULE
   ========================================================= */

.architecture-module{
    position:absolute;
    z-index:5;

    width:clamp(150px,18vw,230px);
    min-height:110px;

    padding:22px 24px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 18px 55px rgba(0,0,0,.20);

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

.architecture-module:hover{
    border-color:rgba(184,137,63,.48);

    box-shadow:
        0 0 35px rgba(184,137,63,.10),
        inset 0 0 25px rgba(184,137,63,.045);

    transform:translateY(-7px);
}

.architecture-module h3{
    margin:0 0 9px;

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

    font-size:16px;
    font-weight:600;
    letter-spacing:.02em;
}

.architecture-module p{
    margin:0;

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

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   04.10 — MODULE STATUS INDICATOR
   ========================================================= */

.architecture-module::before{
    content:"";

    position:absolute;
    top:17px;
    right:17px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:rgba(184,137,63,.85);

    box-shadow:
        0 0 10px rgba(184,137,63,.65);

    animation:
        architectureStatus
        2.5s
        ease-in-out
        infinite;
}

@keyframes architectureStatus{
    0%,
    100%{
        opacity:.4;
        transform:scale(.8);
    }

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


/* =========================================================
   04.11 — MODULE POSITIONS
   ========================================================= */

.architecture-module.vehicle-interface{
    top:5%;
    left:4%;
}

.architecture-module.compute{
    top:5%;
    right:4%;
}

.architecture-module.safety{
    top:50%;
    left:2%;
    transform:translateY(-50%);
}

.architecture-module.security{
    top:50%;
    right:2%;
    transform:translateY(-50%);
}

.architecture-module.rose{
    bottom:5%;
    left:4%;
}

.architecture-module.zhr{
    bottom:5%;
    right:4%;
}


/* =========================================================
   04.12 — EXPANSION MODULE
   ========================================================= */

.architecture-module.expansion{
    top:50%;
    left:50%;

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

    opacity:.18;

    pointer-events:none;
}

.architecture-module.expansion h3{
    color:rgba(184,137,63,.75);
}

.architecture-module.expansion::before{
    display:none;
}


/* =========================================================
   04.13 — ARCHITECTURE CONNECTIONS
   ========================================================= */

.architecture-connection{
    position:absolute;
    z-index:2;

    height:1px;

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.18),
            rgba(184,137,63,.55),
            transparent
        );

    overflow:hidden;
}

.architecture-connection::after{
    content:"";

    position:absolute;
    top:-2px;
    left:-18%;

    width:18%;
    height:5px;

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

    filter:blur(1px);

    animation:
        architectureDataFlow
        3.4s
        linear
        infinite;
}

@keyframes architectureDataFlow{
    0%{
        left:-18%;
    }

    100%{
        left:110%;
    }
}


/* =========================================================
   04.14 — ARCHITECTURE DATA NODES
   ========================================================= */

.architecture-data-node{
    position:absolute;
    z-index:6;

    width:6px;
    height:6px;

    border-radius:50%;

    background:rgba(184,137,63,.95);

    box-shadow:
        0 0 12px rgba(184,137,63,.80);

    animation:
        architectureDataPulse
        2.2s
        ease-in-out
        infinite;
}

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

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


/* =========================================================
   04.15 — ARCHITECTURE SIGNAL LABEL
   ========================================================= */

.architecture-signal{
    position:absolute;
    z-index:7;

    padding:6px 10px;

    border-left:1px solid rgba(184,137,63,.38);

    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.05),
            transparent
        );

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

    font-family:monospace;
    font-size:8px;
    letter-spacing:.15em;
    text-transform:uppercase;
}


/* =========================================================
   04.16 — ARCHITECTURE LEGEND
   ========================================================= */

.architecture-legend{
    position:absolute;
    left:28px;
    bottom:26px;
    z-index:8;

    display:flex;
    flex-wrap:wrap;
    gap:18px;

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

    font-family:monospace;
    font-size:8px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.architecture-legend span{
    display:flex;
    align-items:center;
    gap:7px;
}

.architecture-legend i{
    display:block;

    width:6px;
    height:6px;

    border-radius:50%;

    background:rgba(184,137,63,.80);

    box-shadow:
        0 0 8px rgba(184,137,63,.55);
}


/* =========================================================
   04.17 — ARCHITECTURE RESPONSIVE
   ========================================================= */

@media (max-width:1000px){

    .architecture-panel{
        min-height:820px;
    }

    .architecture-flow{
        min-height:700px;
    }

    .architecture-module{
        width:180px;
    }

    .architecture-module.vehicle-interface{
        left:2%;
    }

    .architecture-module.compute{
        right:2%;
    }

    .architecture-module.safety{
        left:0;
    }

    .architecture-module.security{
        right:0;
    }

    .architecture-module.rose{
        left:2%;
    }

    .architecture-module.zhr{
        right:2%;
    }
}


@media (max-width:700px){

    .architecture-panel{
        min-height:auto;
        padding:25px 18px;
    }

    .architecture-flow{
        min-height:auto;

        display:grid;
        grid-template-columns:1fr;
        gap:14px;

        padding:25px 0;
    }

    .architecture-core{
        position:relative;
        top:auto;
        left:auto;

        transform:none;

        width:150px;
        height:150px;

        margin:20px auto 35px;

        order:0;
    }

    .architecture-module{
        position:relative;

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

        width:100%;
        min-height:auto;

        transform:none !important;

        order:1;
    }

    .architecture-module.expansion{
        opacity:.55;
        pointer-events:auto;
        order:2;
    }

    .architecture-grid{
        background-size:34px 34px;
    }

    .architecture-legend{
        position:relative;
        left:auto;
        bottom:auto;

        margin-top:25px;
        padding-top:20px;

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


/* =========================================================
   04.18 — REDUCED MOTION
   ========================================================= */

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

    .architecture-grid::after,
    .architecture-core,
    .architecture-core::before,
    .architecture-core::after,
    .architecture-module::before,
    .architecture-connection::after,
    .architecture-data-node{

        animation:none !important;
    }
    }
/* =========================================================
   ARS ENGINEERING
   CSS SPECIALIZED SYSTEM
   SECTION 05 — DATA FLOW SYSTEM
   VEHICLE → SENSORS → ARS CORE → AI → ROSE → ZHR → USER
   ANIMATED DATA STREAMS / FLOW LINES / DATA PARTICLES
   PULSE NODES / DIRECTIONAL ARROWS / ACTIVE CORE STATE
   ========================================================= */


/* =========================================================
   05.1 — DATA FLOW MASTER SECTION
   ========================================================= */

.data-flow-system{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(100px,9vw,170px) 0;
}

.data-flow-system::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(184,137,63,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 20%,
            rgba(255,255,255,.025),
            transparent 25%
        );
}

.data-flow-system::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.22;

    background-image:
        linear-gradient(
            rgba(184,137,63,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.045) 1px,
            transparent 1px
        );

    background-size:56px 56px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


/* =========================================================
   05.2 — DATA FLOW INTRO
   ========================================================= */

.data-flow-system .section-heading{
    position:relative;
    z-index:3;

    max-width:900px;

    margin:0 auto clamp(55px,7vw,90px);

    text-align:center;
}

.data-flow-system .section-heading p{
    max-width:720px;
    margin:20px auto 0;
}


/* =========================================================
   05.3 — DATA FLOW TECHNICAL PANEL
   ========================================================= */

.data-flow-panel{
    position:relative;

    min-height:clamp(520px,55vw,720px);

    padding:clamp(30px,5vw,70px);

    overflow:hidden;
    isolation:isolate;

    border:1px solid rgba(184,137,63,.22);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(24px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 100px rgba(184,137,63,.035),
        0 35px 100px rgba(0,0,0,.25);
}


/* =========================================================
   05.4 — DATA FLOW GRID
   ========================================================= */

.data-flow-grid{
    position:absolute;
    inset:0;

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

    opacity:.35;

    background-image:
        linear-gradient(
            rgba(184,137,63,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.055) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 82%
        );
}


/* =========================================================
   05.5 — FLOW HEADER
   ========================================================= */

.data-flow-header{
    position:relative;
    z-index:5;

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

    gap:25px;

    margin-bottom:clamp(45px,6vw,75px);
}

.data-flow-header h3{
    margin:0;

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

    font-size:clamp(18px,2vw,28px);
    font-weight:500;

    letter-spacing:.04em;
}

.data-flow-status{
    display:flex;
    align-items:center;
    gap:9px;

    color:rgba(184,137,63,.75);

    font-family:monospace;
    font-size:9px;

    letter-spacing:.16em;
    text-transform:uppercase;
}

.data-flow-status::before{
    content:"";

    width:7px;
    height:7px;

    border-radius:50%;

    background:rgba(184,137,63,.9);

    box-shadow:
        0 0 12px rgba(184,137,63,.75);

    animation:
        dataFlowStatusPulse
        2s
        ease-in-out
        infinite;
}

@keyframes dataFlowStatusPulse{

    0%,
    100%{
        opacity:.4;
        transform:scale(.75);
    }

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


/* =========================================================
   05.6 — DATA FLOW PIPELINE
   ========================================================= */

.data-flow-pipeline{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(7,1fr);

    align-items:center;

    gap:0;

    min-height:260px;
}


/* =========================================================
   05.7 — DATA FLOW NODE
   ========================================================= */

.data-flow-node{
    position:relative;
    z-index:5;

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

    min-width:0;

    text-align:center;
}

.data-flow-node-core{
    position:relative;

    width:clamp(70px,8vw,105px);
    height:clamp(70px,8vw,105px);

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

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(184,137,63,.11),
            rgba(255,255,255,.025) 55%,
            rgba(0,0,0,.20)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 15px 40px rgba(0,0,0,.20);

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

.data-flow-node:hover .data-flow-node-core{
    transform:translateY(-7px);

    border-color:rgba(184,137,63,.55);

    box-shadow:
        0 0 35px rgba(184,137,63,.14),
        inset 0 0 30px rgba(184,137,63,.06);
}


/* =========================================================
   05.8 — NODE INNER MARK
   ========================================================= */

.data-flow-node-core::before{
    content:"";

    position:absolute;
    inset:9px;

    border:1px dashed rgba(184,137,63,.22);

    border-radius:50%;

    animation:
        flowNodeOrbit
        12s
        linear
        infinite;
}

@keyframes flowNodeOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

.data-flow-node-core span{
    position:relative;
    z-index:2;

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

    font-family:monospace;
    font-size:10px;

    letter-spacing:.12em;
}


/* =========================================================
   05.9 — NODE LABEL
   ========================================================= */

.data-flow-node h4{
    margin:17px 0 7px;

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

    font-size:12px;
    font-weight:600;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.data-flow-node p{
    max-width:120px;

    margin:0;

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

    font-family:monospace;
    font-size:8px;

    line-height:1.6;
    letter-spacing:.05em;
}


/* =========================================================
   05.10 — ACTIVE ARS CORE
   ========================================================= */

.data-flow-node.active .data-flow-node-core{

    border-color:
        rgba(184,137,63,.65);

    box-shadow:
        0 0 35px rgba(184,137,63,.16),
        0 0 80px rgba(184,137,63,.07),
        inset 0 0 45px rgba(184,137,63,.08);

    animation:
        activeCorePulse
        3s
        ease-in-out
        infinite;
}

@keyframes activeCorePulse{

    0%,
    100%{
        box-shadow:
            0 0 25px rgba(184,137,63,.10),
            inset 0 0 30px rgba(184,137,63,.04);
    }

    50%{
        box-shadow:
            0 0 55px rgba(184,137,63,.25),
            0 0 100px rgba(184,137,63,.08),
            inset 0 0 55px rgba(184,137,63,.10);
    }
}


/* =========================================================
   05.11 — FLOW CONNECTION TRACK
   ========================================================= */

.data-flow-connection{
    position:absolute;

    top:
        clamp(35px,4vw,52px);

    left:calc(
        100% / 14
    );

    width:calc(
        100% - (100% / 7)
    );

    height:2px;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(184,137,63,.08),
            rgba(184,137,63,.32),
            rgba(184,137,63,.08)
        );

    overflow:hidden;
}


/* =========================================================
   05.12 — ANIMATED DATA STREAM
   ========================================================= */

.data-flow-connection::before{
    content:"";

    position:absolute;

    top:-2px;
    left:-12%;

    width:12%;
    height:6px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            rgba(184,137,63,.85),
            transparent
        );

    filter:blur(1px);

    animation:
        dataStreamTravel
        3.2s
        linear
        infinite;
}

@keyframes dataStreamTravel{

    0%{
        left:-12%;
    }

    100%{
        left:110%;
    }
}


/* =========================================================
   05.13 — DATA PARTICLES
   ========================================================= */

.data-particle{
    position:absolute;

    top:-3px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        rgba(184,137,63,.95);

    box-shadow:
        0 0 12px rgba(184,137,63,.75);

    animation:
        particleFlow
        4s
        linear
        infinite;
}

.data-particle:nth-child(1){
    animation-delay:0s;
}

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

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

@keyframes particleFlow{

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

    8%{
        opacity:1;
    }

    92%{
        opacity:1;
    }

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


/* =========================================================
   05.14 — DIRECTIONAL ARROWS
   ========================================================= */

.data-flow-arrow{
    position:absolute;

    top:clamp(31px,3.7vw,48px);

    z-index:4;

    width:9px;
    height:9px;

    border-top:1px solid rgba(184,137,63,.75);
    border-right:1px solid rgba(184,137,63,.75);

    transform:rotate(45deg);

    opacity:.65;

    animation:
        arrowPulse
        2s
        ease-in-out
        infinite;
}

.data-flow-arrow:nth-of-type(1){
    left:14%;
}

.data-flow-arrow:nth-of-type(2){
    left:28%;
}

.data-flow-arrow:nth-of-type(3){
    left:42%;
}

.data-flow-arrow:nth-of-type(4){
    left:57%;
}

.data-flow-arrow:nth-of-type(5){
    left:71%;
}

.data-flow-arrow:nth-of-type(6){
    left:85%;
}

@keyframes arrowPulse{

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

    50%{
        opacity:.95;
    }
}


/* =========================================================
   05.15 — FLOW DATA READOUT
   ========================================================= */

.data-flow-readout{
    position:absolute;

    left:clamp(25px,4vw,55px);
    bottom:clamp(20px,3vw,35px);

    display:flex;
    flex-wrap:wrap;

    gap:20px;

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

    font-family:monospace;
    font-size:8px;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.data-flow-readout span{
    display:flex;
    align-items:center;
    gap:7px;
}

.data-flow-readout span::before{
    content:"";

    width:4px;
    height:4px;

    border-radius:50%;

    background:rgba(184,137,63,.75);
}


/* =========================================================
   05.16 — FLOW SYSTEM CAPTION
   ========================================================= */

.data-flow-caption{
    position:absolute;

    right:clamp(25px,4vw,55px);
    bottom:clamp(20px,3vw,35px);

    color:rgba(184,137,63,.45);

    font-family:monospace;
    font-size:8px;

    letter-spacing:.18em;
    text-transform:uppercase;
}


/* =========================================================
   05.17 — RESPONSIVE DATA FLOW
   ========================================================= */

@media (max-width:950px){

    .data-flow-panel{
        min-height:700px;
    }

    .data-flow-pipeline{
        grid-template-columns:
            repeat(4,1fr);

        row-gap:60px;
    }

    .data-flow-connection{
        display:none;
    }

    .data-flow-arrow{
        display:none;
    }

    .data-flow-node-core{
        width:78px;
        height:78px;
    }

    .data-flow-node h4{
        font-size:10px;
    }
}


@media (max-width:700px){

    .data-flow-panel{
        min-height:auto;
        padding:25px 18px;
    }

    .data-flow-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .data-flow-pipeline{
        display:flex;
        flex-direction:column;

        gap:28px;

        padding:25px 0 55px;
    }

    .data-flow-node{
        width:100%;
    }

    .data-flow-node-core{
        width:82px;
        height:82px;
    }

    .data-flow-node p{
        max-width:220px;
    }

    .data-flow-node:not(:last-child)::after{
        content:"";

        position:absolute;

        top:100%;
        left:50%;

        width:1px;
        height:28px;

        background:
            linear-gradient(
                to bottom,
                rgba(184,137,63,.55),
                transparent
            );
    }

    .data-flow-node:not(:last-child)::before{
        content:"";

        position:absolute;

        top:calc(100% + 19px);
        left:calc(50% - 3px);

        width:6px;
        height:6px;

        border-right:1px solid rgba(184,137,63,.65);
        border-bottom:1px solid rgba(184,137,63,.65);

        transform:rotate(45deg);

        z-index:3;
    }

    .data-flow-readout{
        position:relative;

        left:auto;
        bottom:auto;

        padding-top:20px;

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

    .data-flow-caption{
        position:relative;

        right:auto;
        bottom:auto;

        margin-top:18px;
    }
}


/* =========================================================
   05.18 — REDUCED MOTION
   ========================================================= */

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

    .data-flow-status::before,
    .data-flow-node-core::before,
    .data-flow-node.active .data-flow-node-core,
    .data-flow-connection::before,
    .data-particle,
    .data-flow-arrow{

        animation:none !important;
    }
    }

/* =========================================================
   ARS ENGINEERING
   CSS اختصاصی صفحه Engineering
   SECTION 06 — GLASS TECHNICAL SYSTEM
   PREMIUM AUTOMOTIVE TECH-LUXURY GLASS INTERFACE
   ========================================================= */


/* =========================================================
   06.1 — TECHNICAL GLASS FOUNDATION
   ========================================================= */

.ars-engineering .tech-glass,
.ars-engineering .engineering-glass,
.ars-engineering .glass-technical,
.ars-engineering .ars-tech-panel{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018) 45%,
            rgba(0,0,0,.16)
        );

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

    box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(255,255,255,.025);

    backdrop-filter:
        blur(22px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(135%);

    transition:
        transform .55s cubic-bezier(.2,.75,.25,1),
        border-color .55s ease,
        box-shadow .55s ease,
        background .55s ease;

}


/* =========================================================
   06.2 — GLASS TECHNICAL INNER GRID
   ========================================================= */

.ars-engineering .tech-glass::before,
.ars-engineering .engineering-glass::before,
.ars-engineering .glass-technical::before,
.ars-engineering .ars-tech-panel::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.32;

    background-image:

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

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

    background-size:
        32px 32px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 85%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 85%
        );

}


/* =========================================================
   06.3 — GLASS INNER LIGHT
   ========================================================= */

.ars-engineering .tech-glass::after,
.ars-engineering .engineering-glass::after,
.ars-engineering .glass-technical::after,
.ars-engineering .ars-tech-panel::after{

    content:"";

    position:absolute;

    top:-35%;

    left:-20%;

    width:70%;

    height:70%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            transparent 68%
        );

    opacity:.35;

    transform:
        rotate(-18deg);

    transition:
        transform .8s cubic-bezier(.2,.75,.25,1),
        opacity .6s ease;

}


/* =========================================================
   06.4 — TECHNICAL GLASS BORDER GLOW
   ========================================================= */

.ars-engineering .tech-glass:hover,
.ars-engineering .engineering-glass:hover,
.ars-engineering .glass-technical:hover,
.ars-engineering .ars-tech-panel:hover{

    transform:
        translateY(-6px);

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.36),
        0 0 0 1px rgba(255,255,255,.035),
        0 0 45px rgba(184,137,63,.10),
        inset 0 1px 0 rgba(255,255,255,.15);

}


.ars-engineering .tech-glass:hover::after,
.ars-engineering .engineering-glass:hover::after,
.ars-engineering .glass-technical:hover::after,
.ars-engineering .ars-tech-panel:hover::after{

    transform:
        translate(35%,20%)
        rotate(-18deg);

    opacity:.65;

}


/* =========================================================
   06.5 — GLASS REFRACTION LAYER
   ========================================================= */

.ars-engineering .tech-glass .glass-refraction,
.ars-engineering .engineering-glass .glass-refraction{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.10) 48%,
            transparent 65%
        );

    transform:
        translateX(-120%);

    transition:
        opacity .3s ease,
        transform .9s cubic-bezier(.2,.75,.25,1);

}


.ars-engineering .tech-glass:hover .glass-refraction,
.ars-engineering .engineering-glass:hover .glass-refraction{

    opacity:.65;

    transform:
        translateX(120%);

}


/* =========================================================
   06.6 — TECHNICAL GLASS CONTENT DEPTH
   ========================================================= */

.ars-engineering .tech-glass > *,
.ars-engineering .engineering-glass > *,
.ars-engineering .glass-technical > *,
.ars-engineering .ars-tech-panel > *{

    position:relative;

    z-index:2;

}


/* =========================================================
   06.7 — GLASS TECHNICAL LABEL
   ========================================================= */

.ars-engineering .tech-glass-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:7px 12px;

    border:1px solid rgba(255,255,255,.10);

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

    backdrop-filter:
        blur(12px);

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

    font-size:.65rem;

    letter-spacing:.22em;

    text-transform:uppercase;

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

}


.ars-engineering .tech-glass-label::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:
        currentColor;

    box-shadow:
        0 0 12px currentColor;

    animation:
        engineering-glass-pulse 2.2s ease-in-out infinite;

}


/* =========================================================
   06.8 — TECHNICAL GLASS DIVIDER
   ========================================================= */

.ars-engineering .tech-glass-divider{

    width:100%;

    height:1px;

    margin:24px 0;

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

}


/* =========================================================
   06.9 — GLASS TECHNICAL CORNER MARKERS
   ========================================================= */

.ars-engineering .tech-glass-corners::before{

    content:"";

    position:absolute;

    top:12px;

    left:12px;

    width:18px;

    height:18px;

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

    border-left:1px solid rgba(255,255,255,.25);

    pointer-events:none;

}


.ars-engineering .tech-glass-corners::after{

    content:"";

    position:absolute;

    right:12px;

    bottom:12px;

    width:18px;

    height:18px;

    border-right:1px solid rgba(255,255,255,.25);

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

    pointer-events:none;

}


/* =========================================================
   06.10 — TECHNICAL GLASS DEPTH SYSTEM
   ========================================================= */

.ars-engineering .glass-depth-1{

    transform:
        translateZ(0);

}


.ars-engineering .glass-depth-2{

    box-shadow:
        0 30px 80px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.12);

}


.ars-engineering .glass-depth-3{

    box-shadow:
        0 40px 110px rgba(0,0,0,.40),
        0 0 60px rgba(184,137,63,.08),
        inset 0 1px 0 rgba(255,255,255,.15);

}


/* =========================================================
   06.11 — TECHNICAL GLASS HOVER REFRACTION
   ========================================================= */

.ars-engineering .tech-glass-refraction{

    position:relative;

    overflow:hidden;

}


.ars-engineering .tech-glass-refraction::before{

    content:"";

    position:absolute;

    top:0;

    left:-80%;

    width:45%;

    height:100%;

    pointer-events:none;

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

    transform:
        skewX(-18deg);

}


.ars-engineering .tech-glass-refraction:hover::before{

    animation:
        glass-refraction-sweep 1.1s
        cubic-bezier(.2,.75,.25,1);

}


/* =========================================================
   06.12 — GLASS TECHNICAL STATUS INDICATOR
   ========================================================= */

.ars-engineering .glass-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:.62rem;

    letter-spacing:.16em;

    text-transform:uppercase;

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

}


.ars-engineering .glass-status::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

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

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

    animation:
        engineering-status-pulse 1.8s
        ease-in-out infinite;

}


/* =========================================================
   06.13 — TECHNICAL GLASS MICRO INTERACTION
   ========================================================= */

.ars-engineering .tech-glass-interactive{

    cursor:
        pointer;

    transition:
        transform .45s cubic-bezier(.2,.75,.25,1),
        filter .45s ease;

}


.ars-engineering .tech-glass-interactive:hover{

    transform:
        translateY(-5px)
        scale(1.008);

    filter:
        brightness(1.06);

}


/* =========================================================
   06.14 — TECHNICAL GLASS FALLBACK
   ========================================================= */

@supports not (
    backdrop-filter:blur(20px)
){

    .ars-engineering .tech-glass,
    .ars-engineering .engineering-glass,
    .ars-engineering .glass-technical,
    .ars-engineering .ars-tech-panel{

        background:
            rgba(20,20,20,.88);

    }

}


/* =========================================================
   06.15 — GLASS TECHNICAL ANIMATIONS
   ========================================================= */

@keyframes engineering-glass-pulse{

    0%,
    100%{

        opacity:.45;

        transform:
            scale(.85);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15);

    }

}


@keyframes engineering-status-pulse{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15);

    }

}


@keyframes glass-refraction-sweep{

    0%{

        left:-80%;

    }

    100%{

        left:140%;

    }

}


/* =========================================================
   06.16 — RESPONSIVE TECHNICAL GLASS
   ========================================================= */

@media (max-width:900px){

    .ars-engineering .tech-glass,
    .ars-engineering .engineering-glass,
    .ars-engineering .glass-technical,
    .ars-engineering .ars-tech-panel{

        backdrop-filter:
            blur(16px)
            saturate(125%);

        -webkit-backdrop-filter:
            blur(16px)
            saturate(125%);

    }

}


@media (max-width:600px){

    .ars-engineering .tech-glass,
    .ars-engineering .engineering-glass,
    .ars-engineering .glass-technical,
    .ars-engineering .ars-tech-panel{

        border-radius:
            14px;

        box-shadow:
            0 18px 45px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.08);

    }


    .ars-engineering .tech-glass:hover,
    .ars-engineering .engineering-glass:hover,
    .ars-engineering .glass-technical:hover,
    .ars-engineering .ars-tech-panel:hover{

        transform:
            translateY(-3px);

    }

}
/* =========================================================
   ARS ENGINEERING
   CSS اختصاصی صفحه Engineering
   SECTION 07 — ENGINEERING TECHNOLOGY DNA
   AUTOMOTIVE TECHNOLOGY DNA SYSTEM
   PREMIUM TECH-LUXURY / ENGINEERING INTERFACE
   ========================================================= */


/* =========================================================
   07.1 — TECHNOLOGY DNA FOUNDATION
   ========================================================= */

.ars-engineering .technology-dna{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:clamp(70px,8vw,130px) 0;

}


.ars-engineering .technology-dna::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 18% 30%,
            rgba(184,137,63,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,.035),
            transparent 30%
        );

}


/* =========================================================
   07.2 — TECHNOLOGY DNA GRID
   ========================================================= */

.ars-engineering .technology-dna-grid{

    display:grid;

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

    gap:18px;

    margin-top:55px;

}


/* =========================================================
   07.3 — TECHNOLOGY DNA CARD
   ========================================================= */

.ars-engineering .technology-dna-card{

    position:relative;

    min-height:250px;

    padding:30px;

    overflow:hidden;

    isolation:isolate;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 22px 60px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:
        blur(20px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(130%);

    transition:
        transform .55s cubic-bezier(.2,.75,.25,1),
        border-color .45s ease,
        box-shadow .55s ease;

}


.ars-engineering .technology-dna-card:hover{

    transform:
        translateY(-8px);

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

    box-shadow:
        0 32px 85px rgba(0,0,0,.38),
        0 0 45px rgba(184,137,63,.08),
        inset 0 1px 0 rgba(255,255,255,.13);

}


/* =========================================================
   07.4 — DNA CARD TECH GRID
   ========================================================= */

.ars-engineering .technology-dna-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.35;

    background-image:

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

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

    background-size:
        28px 28px;

    mask-image:
        linear-gradient(
            to bottom right,
            rgba(0,0,0,.8),
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom right,
            rgba(0,0,0,.8),
            transparent 75%
        );

}


/* =========================================================
   07.5 — DNA CARD LIGHT SWEEP
   ========================================================= */

.ars-engineering .technology-dna-card::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-70%;

    width:45%;

    height:140%;

    pointer-events:none;

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

    transform:
        skewX(-18deg);

}


.ars-engineering .technology-dna-card:hover::after{

    animation:
        dna-card-sweep 1.1s
        cubic-bezier(.2,.75,.25,1);

}


/* =========================================================
   07.6 — DNA CARD HEADER
   ========================================================= */

.ars-engineering .technology-dna-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.ars-engineering .technology-dna-number{

    font-size:.65rem;

    letter-spacing:.20em;

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

}


.ars-engineering .technology-dna-status{

    width:7px;

    height:7px;

    border-radius:50%;

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

    box-shadow:
        0 0 14px rgba(255,255,255,.45);

    animation:
        dna-status-pulse 2s
        ease-in-out infinite;

}


/* =========================================================
   07.7 — DNA ICON SYSTEM
   ========================================================= */

.ars-engineering .technology-dna-icon{

    width:54px;

    height:54px;

    margin:25px 0;

    display:grid;

    place-items:center;

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

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

    font-size:1.35rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 30px rgba(0,0,0,.20);

    transition:
        transform .45s ease,
        border-color .45s ease;

}


.ars-engineering .technology-dna-card:hover
.technology-dna-icon{

    transform:
        translateY(-3px)
        rotate(3deg);

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

}


/* =========================================================
   07.8 — DNA TITLE
   ========================================================= */

.ars-engineering .technology-dna-card h3{

    margin:0 0 10px;

    font-size:
        clamp(1.05rem,1.5vw,1.35rem);

    letter-spacing:
        -.02em;

}


.ars-engineering .technology-dna-card p{

    margin:0;

    max-width:42ch;

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

    line-height:
        1.8;

    font-size:
        .88rem;

}


/* =========================================================
   07.9 — DNA TECHNOLOGY CATEGORIES
   ========================================================= */

.ars-engineering .technology-dna-category{

    margin-top:22px;

    font-size:.62rem;

    letter-spacing:.18em;

    text-transform:uppercase;

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

}


/* =========================================================
   07.10 — AUTOMOTIVE COMPUTING
   ========================================================= */

.ars-engineering .dna-computing{

    --dna-accent:
        rgba(255,255,255,.75);

}


/* =========================================================
   07.11 — MODULAR ARCHITECTURE
   ========================================================= */

.ars-engineering .dna-modular{

    --dna-accent:
        rgba(255,255,255,.70);

}


/* =========================================================
   07.12 — EMBEDDED SYSTEMS
   ========================================================= */

.ars-engineering .dna-embedded{

    --dna-accent:
        rgba(255,255,255,.68);

}


/* =========================================================
   07.13 — ARTIFICIAL INTELLIGENCE
   ========================================================= */

.ars-engineering .dna-ai{

    --dna-accent:
        rgba(255,255,255,.78);

}


/* =========================================================
   07.14 — CONNECTIVITY
   ========================================================= */

.ars-engineering .dna-connectivity{

    --dna-accent:
        rgba(255,255,255,.70);

}


/* =========================================================
   07.15 — SENSOR INTELLIGENCE
   ========================================================= */

.ars-engineering .dna-sensors{

    --dna-accent:
        rgba(255,255,255,.72);

}


/* =========================================================
   07.16 — CYBERSECURITY
   ========================================================= */

.ars-engineering .dna-cybersecurity{

    --dna-accent:
        rgba(255,255,255,.78);

}


/* =========================================================
   07.17 — OTA & CONTINUOUS EVOLUTION
   ========================================================= */

.ars-engineering .dna-ota{

    --dna-accent:
        rgba(255,255,255,.72);

}


/* =========================================================
   07.18 — DNA NETWORK CONNECTION
   ========================================================= */

.ars-engineering .technology-dna-network{

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.22;

}


.ars-engineering .technology-dna-network::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

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

}


/* =========================================================
   07.19 — DNA CORE
   ========================================================= */

.ars-engineering .technology-dna-core{

    width:
        clamp(130px,12vw,180px);

    height:
        clamp(130px,12vw,180px);

    margin:
        0 auto 55px;

    display:grid;

    place-items:center;

    position:relative;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.07),
            rgba(255,255,255,.015) 65%,
            transparent 70%
        );

    box-shadow:
        0 0 60px rgba(184,137,63,.08),
        inset 0 0 35px rgba(255,255,255,.04);

}


.ars-engineering .technology-dna-core::before{

    content:"";

    position:absolute;

    inset:15px;

    border:
        1px dashed rgba(255,255,255,.16);

    border-radius:50%;

    animation:
        dna-core-rotate 18s
        linear infinite;

}


.ars-engineering .technology-dna-core::after{

    content:"";

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

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

    box-shadow:
        0 0 25px rgba(255,255,255,.75);

    animation:
        dna-core-pulse 2.2s
        ease-in-out infinite;

}


.ars-engineering .technology-dna-core span{

    position:relative;

    z-index:2;

    font-size:.72rem;

    letter-spacing:.20em;

    text-transform:uppercase;

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

}


/* =========================================================
   07.20 — DNA FLOW LINE
   ========================================================= */

.ars-engineering .technology-dna-flow{

    position:absolute;

    left:50%;

    top:100%;

    width:1px;

    height:55px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.22),
            transparent
        );

    transform:
        translateX(-50%);

}


.ars-engineering .technology-dna-flow::after{

    content:"";

    position:absolute;

    top:-10px;

    left:50%;

    width:5px;

    height:5px;

    border-radius:50%;

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

    box-shadow:
        0 0 15px rgba(255,255,255,.65);

    transform:
        translateX(-50%);

    animation:
        dna-flow-particle 2.2s
        linear infinite;

}


/* =========================================================
   07.21 — TECHNOLOGY DNA FOOTER SIGNAL
   ========================================================= */

.ars-engineering .technology-dna-signal{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:50px;

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

    font-size:.62rem;

    letter-spacing:.20em;

    text-transform:uppercase;

}


.ars-engineering .technology-dna-signal::before,
.ars-engineering .technology-dna-signal::after{

    content:"";

    width:
        clamp(30px,8vw,100px);

    height:1px;

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

}


/* =========================================================
   07.22 — RESPONSIVE TECHNOLOGY DNA
   ========================================================= */

@media (max-width:1100px){

    .ars-engineering .technology-dna-grid{

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

    }

}


@media (max-width:800px){

    .ars-engineering .technology-dna-grid{

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

        gap:14px;

    }

    .ars-engineering .technology-dna-card{

        min-height:230px;

        padding:24px;

    }

}


@media (max-width:560px){

    .ars-engineering .technology-dna-grid{

        grid-template-columns:
            1fr;

    }

    .ars-engineering .technology-dna-card{

        min-height:210px;

    }

    .ars-engineering .technology-dna-core{

        margin-bottom:45px;

    }

}


/* =========================================================
   07.23 — TECHNOLOGY DNA ANIMATIONS
   ========================================================= */

@keyframes dna-card-sweep{

    0%{

        left:-70%;

    }

    100%{

        left:140%;

    }

}


@keyframes dna-status-pulse{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15);

    }

}


@keyframes dna-core-rotate{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


@keyframes dna-core-pulse{

    0%,
    100%{

        transform:
            scale(.75);

        opacity:.45;

    }

    50%{

        transform:
            scale(1.15);

        opacity:1;

    }

}


@keyframes dna-flow-particle{

    0%{

        top:-10px;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        top:55px;

        opacity:0;

    }

}


/* =========================================================
   END — SECTION 07
   ENGINEERING TECHNOLOGY DNA
   ========================================================= */
/* =========================================================
   ARS ENGINEERING
   CSS اختصاصی صفحه Engineering
   SECTION 08 — ENGINEERING MODULES
   PREMIUM MODULAR AUTOMOTIVE ENGINEERING SYSTEM
   COMPUTE / SAFETY MCU / POWER / CAMERA / SENSORS /
   COMMUNICATION / EXPANSION / THERMAL & RELIABILITY
   ========================================================= */


/* =========================================================
   08.1 — ENGINEERING MODULES FOUNDATION
   ========================================================= */

.ars-engineering .engineering-modules{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:
        clamp(70px,8vw,130px) 0;

}


.ars-engineering .engineering-modules::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(184,137,63,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(255,255,255,.035),
            transparent 30%
        );

}


/* =========================================================
   08.2 — MODULE SYSTEM GRID
   ========================================================= */

.ars-engineering .modules-grid{

    display:grid;

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

    gap:18px;

    margin-top:55px;

}


/* =========================================================
   08.3 — MODULE CARD
   ========================================================= */

.ars-engineering .module-card{

    position:relative;

    min-height:290px;

    padding:30px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 24px 65px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:
        blur(20px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(130%);

    transition:
        transform .55s cubic-bezier(.2,.75,.25,1),
        border-color .45s ease,
        box-shadow .55s ease;

}


.ars-engineering .module-card:hover{

    transform:
        translateY(-8px);

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

    box-shadow:
        0 35px 90px rgba(0,0,0,.38),
        0 0 45px rgba(184,137,63,.08),
        inset 0 1px 0 rgba(255,255,255,.13);

}


/* =========================================================
   08.4 — MODULE TECHNICAL GRID
   ========================================================= */

.ars-engineering .module-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.32;

    background-image:

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

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

    background-size:
        30px 30px;

    mask-image:
        linear-gradient(
            to bottom right,
            rgba(0,0,0,.85),
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom right,
            rgba(0,0,0,.85),
            transparent 75%
        );

}


/* =========================================================
   08.5 — MODULE LIGHT SWEEP
   ========================================================= */

.ars-engineering .module-card::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-75%;

    width:42%;

    height:140%;

    pointer-events:none;

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

    transform:
        skewX(-18deg);

}


.ars-engineering .module-card:hover::after{

    animation:
        module-light-sweep 1.15s
        cubic-bezier(.2,.75,.25,1);

}


/* =========================================================
   08.6 — MODULE HEADER
   ========================================================= */

.ars-engineering .module-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

}


.ars-engineering .module-number{

    font-size:.62rem;

    letter-spacing:.20em;

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

}


.ars-engineering .module-state{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:.58rem;

    letter-spacing:.16em;

    text-transform:uppercase;

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

}


.ars-engineering .module-state::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

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

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

    animation:
        module-state-pulse 2s
        ease-in-out infinite;

}


/* =========================================================
   08.7 — MODULE ICON
   ========================================================= */

.ars-engineering .module-icon{

    width:58px;

    height:58px;

    margin:
        26px 0 22px;

    display:grid;

    place-items:center;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.20);

    font-size:
        1.35rem;

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

}


.ars-engineering .module-card:hover .module-icon{

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

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

    box-shadow:
        0 0 25px rgba(184,137,63,.08),
        inset 0 1px 0 rgba(255,255,255,.12);

}


/* =========================================================
   08.8 — MODULE CONTENT
   ========================================================= */

.ars-engineering .module-card h3{

    margin:
        0 0 10px;

    font-size:
        clamp(1.05rem,1.45vw,1.30rem);

    letter-spacing:
        -.02em;

}


.ars-engineering .module-card p{

    margin:0;

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

    line-height:
        1.8;

    font-size:
        .86rem;

}


/* =========================================================
   08.9 — MODULE TECHNICAL TAGS
   ========================================================= */

.ars-engineering .module-tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:auto;

    padding-top:24px;

}


.ars-engineering .module-tags span{

    padding:
        5px 8px;

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

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

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

    font-size:
        .56rem;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


/* =========================================================
   08.10 — CORE MODULE
   ========================================================= */

.ars-engineering .module-compute{

    grid-column:
        span 2;

    min-height:
        330px;

}


.ars-engineering .module-compute .module-icon{

    box-shadow:
        0 0 35px rgba(184,137,63,.10),
        inset 0 0 25px rgba(255,255,255,.035);

}


/* =========================================================
   08.11 — SAFETY MCU MODULE
   ========================================================= */

.ars-engineering .module-safety{

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

}


/* =========================================================
   08.12 — POWER MANAGEMENT MODULE
   ========================================================= */

.ars-engineering .module-power{

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

}


/* =========================================================
   08.13 — CAMERA SYSTEM MODULE
   ========================================================= */

.ars-engineering .module-camera{

    min-height:
        300px;

}


/* =========================================================
   08.14 — SENSOR SYSTEM MODULE
   ========================================================= */

.ars-engineering .module-sensors{

    min-height:
        300px;

}


/* =========================================================
   08.15 — COMMUNICATION MODULE
   ========================================================= */

.ars-engineering .module-communication{

    min-height:
        300px;

}


/* =========================================================
   08.16 — EXPANSION MODULE
   ========================================================= */

.ars-engineering .module-expansion{

    grid-column:
        span 2;

    min-height:
        300px;

}


/* =========================================================
   08.17 — THERMAL & RELIABILITY MODULE
   ========================================================= */

.ars-engineering .module-thermal{

    grid-column:
        span 2;

    min-height:
        300px;

}


/* =========================================================
   08.18 — MODULE ARCHITECTURE CONNECTOR
   ========================================================= */

.ars-engineering .modules-connector{

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    z-index:-1;

    pointer-events:none;

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

}


.ars-engineering .modules-connector::after{

    content:"";

    position:absolute;

    top:50%;

    left:-10px;

    width:6px;

    height:6px;

    border-radius:50%;

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

    box-shadow:
        0 0 18px rgba(255,255,255,.65);

    transform:
        translateY(-50%);

    animation:
        module-connector-flow 4s
        linear infinite;

}


/* =========================================================
   08.19 — MODULE SYSTEM STATUS
   ========================================================= */

.ars-engineering .modules-system-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-top:55px;

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

    font-size:
        .62rem;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

}


.ars-engineering .modules-system-status::before,
.ars-engineering .modules-system-status::after{

    content:"";

    width:
        clamp(35px,8vw,110px);

    height:1px;

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

}


/* =========================================================
   08.20 — MODULE RESPONSIVE
   ========================================================= */

@media (max-width:1100px){

    .ars-engineering .modules-grid{

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

    }

    .ars-engineering .module-compute,
    .ars-engineering .module-expansion,
    .ars-engineering .module-thermal{

        grid-column:
            span 1;

    }

}


@media (max-width:800px){

    .ars-engineering .modules-grid{

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

        gap:14px;

    }

    .ars-engineering .module-card{

        min-height:
            250px;

        padding:
            24px;

    }

}


@media (max-width:560px){

    .ars-engineering .modules-grid{

        grid-template-columns:
            1fr;

    }

    .ars-engineering .module-compute,
    .ars-engineering .module-expansion,
    .ars-engineering .module-thermal{

        grid-column:
            span 1;

    }

    .ars-engineering .module-card{

        min-height:
            230px;

    }

}


/* =========================================================
   08.21 — MODULE ANIMATIONS
   ========================================================= */

@keyframes module-light-sweep{

    0%{

        left:-75%;

    }

    100%{

        left:145%;

    }

}


@keyframes module-state-pulse{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.80);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15);

    }

}


@keyframes module-connector-flow{

    0%{

        left:-10px;

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        left:100%;

        opacity:0;

    }

}


/* =========================================================
   END — SECTION 08
   ENGINEERING MODULES
   ========================================================= */
/* =========================================================
   ARS ENGINEERING
   CSS اختصاصی صفحه Engineering
   SECTION 09 — AUTOMOTIVE INTERFACE / SIGNAL SYSTEM
   PREMIUM VEHICLE SIGNAL & INTERFACE ARCHITECTURE
   CAN / LIN / OBD-II / SENSOR / CAMERA / CONNECTIVITY
   SIGNAL NODES / DATA PULSE / TECHNICAL GLASS
   ========================================================= */


/* =========================================================
   09.1 — SIGNAL SYSTEM FOUNDATION
   ========================================================= */

.ars-engineering .automotive-signal-system{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:
        clamp(70px,8vw,130px) 0;

}


.ars-engineering .automotive-signal-system::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 20% 35%,
            rgba(184,137,63,.08),
            transparent 30%
        ),

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

}


/* =========================================================
   09.2 — SIGNAL ARCHITECTURE PANEL
   ========================================================= */

.ars-engineering .signal-architecture{

    position:relative;

    padding:
        clamp(28px,4vw,55px);

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 30px 90px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:
        blur(22px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(130%);

}


/* =========================================================
   09.3 — SIGNAL TECHNICAL GRID
   ========================================================= */

.ars-engineering .signal-architecture::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.30;

    background-image:

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

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

    background-size:
        32px 32px;

}


/* =========================================================
   09.4 — SIGNAL NETWORK
   ========================================================= */

.ars-engineering .signal-network{

    position:relative;

    display:grid;

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

    gap:20px;

    margin-top:55px;

}


/* =========================================================
   09.5 — SIGNAL NODE
   ========================================================= */

.ars-engineering .signal-node{

    position:relative;

    min-height:220px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

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

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 50px rgba(0,0,0,.20);

    transition:
        transform .5s ease,
        border-color .45s ease,
        box-shadow .5s ease;

}


.ars-engineering .signal-node:hover{

    transform:
        translateY(-7px);

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

    box-shadow:
        0 28px 70px rgba(0,0,0,.34),
        0 0 35px rgba(184,137,63,.07);

}


/* =========================================================
   09.6 — SIGNAL NODE HEADER
   ========================================================= */

.ars-engineering .signal-node-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.ars-engineering .signal-node-id{

    font-size:
        .60rem;

    letter-spacing:
        .20em;

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

}


.ars-engineering .signal-node-state{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:
        .55rem;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

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

}


.ars-engineering .signal-node-state::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

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

    box-shadow:
        0 0 14px rgba(255,255,255,.60);

    animation:
        signal-node-pulse 2s
        ease-in-out infinite;

}


/* =========================================================
   09.7 — SIGNAL NODE ICON
   ========================================================= */

.ars-engineering .signal-node-icon{

    width:52px;

    height:52px;

    margin:
        22px 0;

    display:grid;

    place-items:center;

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

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

    font-size:
        1.2rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);

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

}


.ars-engineering .signal-node:hover
.signal-node-icon{

    transform:
        scale(1.06);

    box-shadow:
        0 0 25px rgba(184,137,63,.08),
        inset 0 1px 0 rgba(255,255,255,.12);

}


/* =========================================================
   09.8 — SIGNAL NODE CONTENT
   ========================================================= */

.ars-engineering .signal-node h3{

    margin:
        0 0 9px;

    font-size:
        clamp(1rem,1.35vw,1.22rem);

}


.ars-engineering .signal-node p{

    margin:0;

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

    line-height:
        1.75;

    font-size:
        .84rem;

}


/* =========================================================
   09.9 — SIGNAL PROTOCOL TAGS
   ========================================================= */

.ars-engineering .signal-tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:
        20px;

}


.ars-engineering .signal-tags span{

    padding:
        5px 8px;

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

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

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

    font-size:
        .55rem;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


/* =========================================================
   09.10 — CAN BUS
   ========================================================= */

.ars-engineering .signal-can{

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

}


.ars-engineering .signal-can::after{

    content:"";

    position:absolute;

    top:50%;

    right:-20px;

    width:40px;

    height:1px;

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

}


/* =========================================================
   09.11 — LIN BUS
   ========================================================= */

.ars-engineering .signal-lin{

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

}


/* =========================================================
   09.12 — OBD-II INTERFACE
   ========================================================= */

.ars-engineering .signal-obd{

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

}


.ars-engineering .signal-obd .signal-node-icon{

    position:relative;

}


.ars-engineering .signal-obd .signal-node-icon::after{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

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

    box-shadow:
        0 0 18px rgba(255,255,255,.70);

    animation:
        obd-signal-pulse 1.8s
        ease-in-out infinite;

}


/* =========================================================
   09.13 — SENSOR SIGNALS
   ========================================================= */

.ars-engineering .signal-sensors{

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

}


/* =========================================================
   09.14 — CAMERA STREAMS
   ========================================================= */

.ars-engineering .signal-camera{

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

}


/* =========================================================
   09.15 — CONNECTIVITY
   ========================================================= */

.ars-engineering .signal-connectivity{

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

}


/* =========================================================
   09.16 — SIGNAL FLOW LINES
   ========================================================= */

.ars-engineering .signal-flow-line{

    position:absolute;

    pointer-events:none;

    height:1px;

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

    overflow:hidden;

}


.ars-engineering .signal-flow-line::after{

    content:"";

    position:absolute;

    top:50%;

    left:-30px;

    width:20px;

    height:3px;

    transform:
        translateY(-50%);

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

    box-shadow:
        0 0 16px rgba(255,255,255,.75);

    animation:
        signal-data-stream 3s
        linear infinite;

}


/* =========================================================
   09.17 — DATA PULSE SYSTEM
   ========================================================= */

.ars-engineering .signal-data-pulse{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

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

    box-shadow:
        0 0 20px rgba(255,255,255,.75);

    pointer-events:none;

    animation:
        signal-pulse-travel 4s
        linear infinite;

}


/* =========================================================
   09.18 — SIGNAL LEGEND
   ========================================================= */

.ars-engineering .signal-legend{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:22px;

    margin-top:
        45px;

}


.ars-engineering .signal-legend-item{

    display:flex;

    align-items:center;

    gap:8px;

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

    font-size:
        .60rem;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.ars-engineering .signal-legend-item::before{

    content:"";

    width:18px;

    height:1px;

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

}


/* =========================================================
   09.19 — VEHICLE INTERFACE STATUS BAR
   ========================================================= */

.ars-engineering .vehicle-interface-status{

    display:grid;

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

    gap:12px;

    margin-top:
        40px;

}


.ars-engineering .interface-status-item{

    padding:
        15px 18px;

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

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

}


.ars-engineering .interface-status-item span{

    display:block;

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

    font-size:
        .55rem;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.ars-engineering .interface-status-item strong{

    display:block;

    margin-top:
        7px;

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

    font-size:
        .78rem;

    letter-spacing:
        .05em;

}


/* =========================================================
   09.20 — SIGNAL RESPONSIVE
   ========================================================= */

@media (max-width:1000px){

    .ars-engineering .signal-network{

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

    }

    .ars-engineering .vehicle-interface-status{

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

    }

}


@media (max-width:650px){

    .ars-engineering .signal-network{

        grid-template-columns:
            1fr;

        gap:14px;

    }

    .ars-engineering .vehicle-interface-status{

        grid-template-columns:
            1fr;

    }

    .ars-engineering .signal-architecture{

        padding:
            24px;

    }

    .ars-engineering .signal-node{

        min-height:
            200px;

        padding:
            24px;

    }

}


/* =========================================================
   09.21 — SIGNAL ANIMATIONS
   ========================================================= */

@keyframes signal-node-pulse{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.80);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15);

    }

}


@keyframes obd-signal-pulse{

    0%,
    100%{

        transform:
            scale(.65);

        opacity:.45;

    }

    50%{

        transform:
            scale(1.20);

        opacity:1;

    }

}


@keyframes signal-data-stream{

    0%{

        left:-30px;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        left:calc(100% + 30px);

        opacity:0;

    }

}


@keyframes signal-pulse-travel{

    0%{

        transform:
            translateX(0);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        transform:
            translateX(260px);

        opacity:0;

    }

}


/* =========================================================
   END — SECTION 09
   AUTOMOTIVE INTERFACE / SIGNAL SYSTEM
   ========================================================= */
/* =========================================================
   ARS ENGINEERING
   CSS اختصاصی صفحه Engineering
   SECTION 10 — ENGINEERING VALIDATION & DEVELOPMENT
   PREMIUM ENGINEERING DEVELOPMENT & VALIDATION SYSTEM
   PROTOTYPE / TESTING / VALIDATION / RELIABILITY /
   PRODUCTION READINESS / ENGINEERING PIPELINE /
   PROGRESS INDICATORS
   ========================================================= */


/* =========================================================
   10.1 — VALIDATION SYSTEM FOUNDATION
   ========================================================= */

.ars-engineering .engineering-validation{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:
        clamp(70px,8vw,130px) 0;

}


.ars-engineering .engineering-validation::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 18% 30%,
            rgba(184,137,63,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,.035),
            transparent 32%
        );

}


/* =========================================================
   10.2 — VALIDATION PIPELINE
   ========================================================= */

.ars-engineering .validation-pipeline{

    position:relative;

    display:grid;

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

    gap:12px;

    margin-top:55px;

}


/* =========================================================
   10.3 — PIPELINE CONNECTOR
   ========================================================= */

.ars-engineering .validation-pipeline::before{

    content:"";

    position:absolute;

    top:42px;

    left:5%;

    right:5%;

    height:1px;

    z-index:-1;

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

}


/* =========================================================
   10.4 — VALIDATION STAGE CARD
   ========================================================= */

.ars-engineering .validation-stage{

    position:relative;

    min-height:240px;

    padding:
        26px 22px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        0 20px 55px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter:
        blur(20px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(125%);

    transition:
        transform .5s ease,
        border-color .45s ease,
        box-shadow .5s ease;

}


.ars-engineering .validation-stage:hover{

    transform:
        translateY(-8px);

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

    box-shadow:
        0 30px 75px rgba(0,0,0,.34),
        0 0 35px rgba(184,137,63,.07),
        inset 0 1px 0 rgba(255,255,255,.12);

}


/* =========================================================
   10.5 — STAGE NUMBER
   ========================================================= */

.ars-engineering .validation-stage-number{

    width:34px;

    height:34px;

    display:grid;

    place-items:center;

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

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

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

    font-size:
        .62rem;

    letter-spacing:
        .08em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);

}


/* =========================================================
   10.6 — STAGE STATUS
   ========================================================= */

.ars-engineering .validation-stage-status{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:18px;

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

    font-size:
        .55rem;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.ars-engineering .validation-stage-status::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

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

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

    animation:
        validation-status-pulse 2s
        ease-in-out infinite;

}


/* =========================================================
   10.7 — STAGE CONTENT
   ========================================================= */

.ars-engineering .validation-stage h3{

    margin:
        18px 0 10px;

    font-size:
        clamp(.95rem,1.25vw,1.15rem);

}


.ars-engineering .validation-stage p{

    margin:0;

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

    line-height:
        1.75;

    font-size:
        .78rem;

}


/* =========================================================
   10.8 — VALIDATION METRICS
   ========================================================= */

.ars-engineering .validation-metrics{

    display:grid;

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

    gap:14px;

    margin-top:45px;

}


.ars-engineering .validation-metric{

    padding:
        24px;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);

}


.ars-engineering .validation-metric strong{

    display:block;

    font-size:
        clamp(1.2rem,2vw,1.7rem);

    letter-spacing:
        -.03em;

}


.ars-engineering .validation-metric span{

    display:block;

    margin-top:7px;

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

    font-size:
        .58rem;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


/* =========================================================
   10.9 — RELIABILITY MATRIX
   ========================================================= */

.ars-engineering .reliability-matrix{

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:20px;

    margin-top:45px;

}


.ars-engineering .reliability-panel{

    position:relative;

    padding:
        clamp(26px,4vw,45px);

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter:
        blur(20px);

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

}


.ars-engineering .reliability-panel h3{

    margin:
        0 0 12px;

}


.ars-engineering .reliability-panel p{

    margin:0;

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

    line-height:
        1.8;

}


/* =========================================================
   10.10 — RELIABILITY CHECKLIST
   ========================================================= */

.ars-engineering .reliability-checklist{

    display:grid;

    gap:10px;

    margin-top:25px;

}


.ars-engineering .reliability-check{

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        12px 14px;

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

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

}


.ars-engineering .reliability-check::before{

    content:"";

    width:7px;

    height:7px;

    flex:0 0 auto;

    border-radius:50%;

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

    box-shadow:
        0 0 12px rgba(255,255,255,.50);

}


.ars-engineering .reliability-check span{

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

    font-size:
        .75rem;

}


/* =========================================================
   10.11 — PROGRESS INDICATORS
   ========================================================= */

.ars-engineering .engineering-progress{

    display:grid;

    gap:22px;

    margin-top:25px;

}


.ars-engineering .progress-item{

    display:grid;

    gap:9px;

}


.ars-engineering .progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.ars-engineering .progress-header span{

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

    font-size:
        .65rem;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


.ars-engineering .progress-header strong{

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

    font-size:
        .68rem;

}


.ars-engineering .progress-track{

    position:relative;

    height:4px;

    overflow:hidden;

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

}


.ars-engineering .progress-bar{

    position:relative;

    height:100%;

    width:
        var(--progress,70%);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.75)
        );

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

    animation:
        engineering-progress-load 1.6s
        ease-out both;

}


.ars-engineering .progress-bar::after{

    content:"";

    position:absolute;

    top:0;

    left:-20%;

    width:20%;

    height:100%;

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

    box-shadow:
        0 0 14px rgba(255,255,255,.65);

    animation:
        progress-light-sweep 2.8s
        linear infinite;

}


/* =========================================================
   10.12 — PRODUCTION READINESS PANEL
   ========================================================= */

.ars-engineering .production-readiness{

    margin-top:45px;

    padding:
        clamp(28px,4vw,50px);

    display:grid;

    grid-template-columns:
        1fr auto;

    align-items:center;

    gap:35px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.018)
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 25px 70px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:
        blur(22px);

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

}


.ars-engineering .production-readiness h2{

    margin:
        0 0 10px;

}


.ars-engineering .production-readiness p{

    margin:0;

    max-width:
        700px;

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

    line-height:
        1.8;

}


/* =========================================================
   10.13 — READINESS STATUS
   ========================================================= */

.ars-engineering .readiness-status{

    min-width:
        150px;

    text-align:center;

    padding:
        22px;

    border:
        1px solid rgba(255,255,255,.10);

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

}


.ars-engineering .readiness-status strong{

    display:block;

    font-size:
        1.25rem;

}


.ars-engineering .readiness-status span{

    display:block;

    margin-top:7px;

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

    font-size:
        .55rem;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


/* =========================================================
   10.14 — VALIDATION RESPONSIVE
   ========================================================= */

@media (max-width:1050px){

    .ars-engineering .validation-pipeline{

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

    }

    .ars-engineering .validation-pipeline::before{

        display:none;

    }

    .ars-engineering .validation-metrics{

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

    }

    .ars-engineering .reliability-matrix{

        grid-template-columns:
            1fr;

    }

}


@media (max-width:700px){

    .ars-engineering .validation-pipeline{

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

        gap:14px;

    }

    .ars-engineering .validation-stage{

        min-height:
            220px;

        padding:
            22px;

    }

    .ars-engineering .production-readiness{

        grid-template-columns:
            1fr;

    }

    .ars-engineering .readiness-status{

        width:100%;

    }

}


@media (max-width:500px){

    .ars-engineering .validation-pipeline{

        grid-template-columns:
            1fr;

    }

    .ars-engineering .validation-metrics{

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   10.15 — VALIDATION ANIMATIONS
   ========================================================= */

@keyframes validation-status-pulse{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15);

    }

}


@keyframes engineering-progress-load{

    from{

        width:0;

    }

    to{

        width:
            var(--progress,70%);

    }

}


@keyframes progress-light-sweep{

    0%{

        left:-20%;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        left:110%;

        opacity:0;

    }

}


/* =========================================================
   END — SECTION 10
   ENGINEERING VALIDATION & DEVELOPMENT
   ========================================================= */
/* =========================================================
   ARS ENGINEERING
   CSS — SECTION 11
   FUTURE EXPANSION SYSTEM
   ========================================================= */


/* =========================================================
   11.1 — FUTURE EXPANSION SECTION
   ========================================================= */

.future-expansion-system{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


/* =========================================================
   11.2 — EXPANSION BACKGROUND
   ========================================================= */

.future-expansion-system::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(
        circle at 20% 35%,
        rgba(184,137,63,.14),
        transparent 28%
    ),

    radial-gradient(
        circle at 80% 65%,
        rgba(120,180,220,.10),
        transparent 30%
    );

}


/* =========================================================
   11.3 — FUTURE EXPANSION HEADER
   ========================================================= */

.future-expansion-system .section-heading{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}


/* =========================================================
   11.4 — EXPANSION GRID
   ========================================================= */

.expansion-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:24px;

}


/* =========================================================
   11.5 — EXPANSION CARDS
   ========================================================= */

.expansion-card{

    position:relative;

    min-height:280px;

    padding:38px;

    overflow:hidden;

    transition:

    transform .45s ease,

    border-color .45s ease,

    box-shadow .45s ease;

}


/* =========================================================
   11.6 — TECHNICAL GRID INSIDE CARDS
   ========================================================= */

.expansion-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.18;

    background-image:

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

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

    background-size:
    28px 28px;

}


/* =========================================================
   11.7 — INNER TECHNICAL LIGHT
   ========================================================= */

.expansion-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    top:-70px;

    right:-70px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(184,137,63,.28),
        transparent 70%
    );

    transition:
    transform .6s ease;

}


/* =========================================================
   11.8 — EXPANSION CARD HOVER
   ========================================================= */

.expansion-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(184,137,63,.45);

    box-shadow:

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

    0 0 35px
    rgba(184,137,63,.08);

}


.expansion-card:hover::after{

    transform:
    scale(2);

}


/* =========================================================
   11.9 — EXPANSION ICON
   ========================================================= */

.expansion-icon{

    position:relative;

    z-index:2;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border:

    1px solid
    rgba(184,137,63,.35);

    border-radius:14px;

    background:

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

    box-shadow:

    inset 0 0 20px
    rgba(184,137,63,.05);

    font-size:24px;

    transition:

    transform .4s ease,

    box-shadow .4s ease;

}


.expansion-card:hover
.expansion-icon{

    transform:
    translateY(-4px)
    rotate(4deg);

    box-shadow:

    0 0 25px
    rgba(184,137,63,.20);

}


/* =========================================================
   11.10 — EXPANSION CARD CONTENT
   ========================================================= */

.expansion-card h3{

    position:relative;

    z-index:2;

    margin-bottom:14px;

}


.expansion-card p{

    position:relative;

    z-index:2;

    line-height:1.8;

    opacity:.72;

}


/* =========================================================
   11.11 — UPGRADE PATH SYSTEM
   ========================================================= */

.upgrade-path{

    position:relative;

    z-index:2;

    margin-top:70px;

    padding:50px;

    overflow:hidden;

}


/* =========================================================
   11.12 — UPGRADE PATH HEADER
   ========================================================= */

.upgrade-path-header{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:50px;

}


/* =========================================================
   11.13 — UPGRADE TIMELINE
   ========================================================= */

.upgrade-timeline{

    position:relative;

    display:grid;

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

    gap:20px;

}


/* =========================================================
   11.14 — TIMELINE CONNECTOR
   ========================================================= */

.upgrade-timeline::before{

    content:"";

    position:absolute;

    top:30px;

    left:10%;

    right:10%;

    height:1px;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(184,137,63,.65),
        rgba(255,255,255,.25),
        rgba(184,137,63,.65),
        transparent
    );

}


/* =========================================================
   11.15 — UPGRADE STAGE
   ========================================================= */

.upgrade-stage{

    position:relative;

    z-index:2;

    text-align:center;

}


.upgrade-node{

    width:60px;

    height:60px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:

    1px solid
    rgba(184,137,63,.5);

    border-radius:50%;

    background:

    rgba(15,15,18,.88);

    box-shadow:

    0 0 0 7px
    rgba(184,137,63,.035),

    0 0 25px
    rgba(184,137,63,.10);

    transition:

    transform .4s ease,

    box-shadow .4s ease;

}


.upgrade-stage:hover
.upgrade-node{

    transform:
    scale(1.12);

    box-shadow:

    0 0 0 10px
    rgba(184,137,63,.045),

    0 0 35px
    rgba(184,137,63,.22);

}


.upgrade-stage h4{

    margin-bottom:8px;

}


.upgrade-stage span{

    font-size:.78rem;

    opacity:.55;

}


/* =========================================================
   11.16 — 10+ YEAR EVOLUTION PANEL
   ========================================================= */

.evolution-panel{

    position:relative;

    z-index:2;

    margin-top:70px;

    padding:70px;

    overflow:hidden;

    text-align:center;

}


.evolution-panel::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        115deg,
        transparent 20%,
        rgba(255,255,255,.035) 48%,
        transparent 60%
    );

    transform:
    translateX(-100%);

    animation:
    engineeringLightSweep
    8s linear infinite;

}


@keyframes engineeringLightSweep{

    0%{

        transform:
        translateX(-100%);

    }

    100%{

        transform:
        translateX(100%);

    }

}


/* =========================================================
   11.17 — EVOLUTION CORE
   ========================================================= */

.evolution-core{

    position:relative;

    z-index:2;

    width:150px;

    height:150px;

    margin:0 auto 35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border:

    1px solid
    rgba(184,137,63,.45);

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(184,137,63,.12),
        rgba(255,255,255,.025) 55%,
        transparent 70%
    );

    box-shadow:

    0 0 35px
    rgba(184,137,63,.12);

    animation:

    engineeringCorePulse
    4s ease-in-out infinite;

}


@keyframes engineeringCorePulse{

    0%,
    100%{

        box-shadow:

        0 0 25px
        rgba(184,137,63,.08);

    }

    50%{

        box-shadow:

        0 0 55px
        rgba(184,137,63,.22);

    }

}


.evolution-core strong{

    font-size:2rem;

    letter-spacing:.08em;

}


.evolution-core span{

    margin-top:6px;

    font-size:.65rem;

    letter-spacing:.18em;

    opacity:.55;

}


/* =========================================================
   11.18 — EVOLUTION CONTENT
   ========================================================= */

.evolution-panel h2{

    position:relative;

    z-index:2;

    margin-bottom:20px;

}


.evolution-panel p{

    position:relative;

    z-index:2;

    max-width:750px;

    margin:0 auto;

    line-height:1.9;

    opacity:.72;

}


/* =========================================================
   11.19 — RESPONSIVE ENGINEERING EXPANSION
   ========================================================= */

@media
(max-width:1100px){

    .expansion-grid{

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

    }

    .upgrade-timeline{

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

        row-gap:45px;

    }

    .upgrade-timeline::before{

        display:none;

    }

}


/* =========================================================
   11.20 — MOBILE ENGINEERING EXPANSION
   ========================================================= */

@media
(max-width:700px){

    .future-expansion-system{

        padding:90px 0;

    }

    .expansion-grid{

        grid-template-columns:
        1fr;

    }

    .expansion-card{

        min-height:auto;

        padding:30px;

    }

    .upgrade-path{

        padding:30px 20px;

    }

    .upgrade-timeline{

        grid-template-columns:
        1fr 1fr;

    }

    .evolution-panel{

        padding:50px 25px;

    }

}


/* =========================================================
   11.21 — SMALL MOBILE
   ========================================================= */

@media
(max-width:480px){

    .upgrade-timeline{

        grid-template-columns:
        1fr;

    }

    .evolution-core{

        width:125px;

        height:125px;

    }

    }


/* =========================================================
   ARS ENGINEERING
   CSS اختصاصی صفحه Engineering
   SECTION 12 — ENGINEERING CTA / FINAL SYSTEM
   FINAL TECHNICAL GLASS PANEL + ANIMATED CORE
   DATA PULSE + LIGHT SWEEP + EXECUTIVE CTA
   PREMIUM CLOSING ANIMATION
   ========================================================= */


/* =========================================================
   12.1 — ENGINEERING FINAL SYSTEM
   ========================================================= */

.engineering-final-system{

    position:relative;

    width:100%;

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

    overflow:hidden;

    isolation:isolate;

}


/* =========================================================
   12.2 — FINAL TECHNICAL BACKGROUND
   ========================================================= */

.engineering-final-system::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-3;

    background:

    radial-gradient(
        circle at 50% 50%,
        rgba(184,137,63,.16),
        transparent 28%
    ),

    linear-gradient(
        90deg,
        transparent 49.8%,
        rgba(184,137,63,.07) 50%,
        transparent 50.2%
    );

    pointer-events:none;

}


/* =========================================================
   12.3 — TECHNICAL GRID
   ========================================================= */

.engineering-final-system::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    background-image:

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

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

    background-size:48px 48px;

    mask-image:
    linear-gradient(
        to bottom,
        transparent,
        black 18%,
        black 82%,
        transparent
    );

    pointer-events:none;

}


/* =========================================================
   12.4 — FINAL TECHNICAL GLASS PANEL
   ========================================================= */

.engineering-final-panel{

    position:relative;

    max-width:1200px;

    margin:0 auto;

    padding:clamp(45px,6vw,90px);

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

    border-radius:32px;

    background:

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

    backdrop-filter:blur(24px);

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

    box-shadow:

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

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

    inset 0 -1px 0 rgba(184,137,63,.08);

    overflow:hidden;

    isolation:isolate;

}


/* =========================================================
   12.5 — GLASS INNER TECH GRID
   ========================================================= */

.engineering-final-panel::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background-image:

    linear-gradient(
        rgba(184,137,63,.035) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(184,137,63,.035) 1px,
        transparent 1px
    );

    background-size:32px 32px;

    opacity:.55;

    pointer-events:none;

}


/* =========================================================
   12.6 — LIGHT SWEEP
   ========================================================= */

.engineering-final-panel::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-45%;

    width:35%;

    height:140%;

    background:

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

    transform:rotate(18deg);

    animation:
    engineeringFinalLightSweep 8s ease-in-out infinite;

    pointer-events:none;

}


@keyframes engineeringFinalLightSweep{

    0%{

        left:-45%;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    45%{

        left:110%;

        opacity:0;

    }

    100%{

        left:110%;

        opacity:0;

    }

}


/* =========================================================
   12.7 — FINAL CONTENT
   ========================================================= */

.engineering-final-content{

    position:relative;

    z-index:3;

    max-width:760px;

}


.engineering-final-content .section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}


.engineering-final-content .section-label::before{

    content:"";

    width:28px;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        currentColor
    );

}


.engineering-final-content h2{

    margin:0 0 24px;

    font-size:clamp(2.2rem,5vw,5rem);

    line-height:1.02;

    letter-spacing:-.04em;

}


.engineering-final-content p{

    max-width:680px;

    margin:0 0 34px;

    line-height:1.9;

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

}


/* =========================================================
   12.8 — ANIMATED ARS CORE
   ========================================================= */

.engineering-final-core{

    position:absolute;

    top:50%;

    right:8%;

    width:clamp(150px,18vw,260px);

    aspect-ratio:1;

    transform:
    translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(184,137,63,.20),
        rgba(184,137,63,.04) 45%,
        transparent 70%
    );

    box-shadow:

    0 0 50px rgba(184,137,63,.12),

    inset 0 0 30px rgba(184,137,63,.10);

    animation:
    engineeringCoreFloat 5s ease-in-out infinite;

}


@keyframes engineeringCoreFloat{

    0%,
    100%{

        transform:
        translateY(-50%)
        scale(1);

    }

    50%{

        transform:
        translateY(-50%)
        scale(1.035);

    }

}


/* =========================================================
   12.9 — CORE RINGS
   ========================================================= */

.engineering-final-core::before,
.engineering-final-core::after{

    content:"";

    position:absolute;

    inset:10%;

    border:1px solid rgba(184,137,63,.32);

    border-radius:50%;

}


.engineering-final-core::before{

    animation:
    engineeringCoreRotate 14s linear infinite;

    border-left-color:transparent;

}


.engineering-final-core::after{

    inset:22%;

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

    border-right-color:rgba(184,137,63,.55);

    animation:
    engineeringCoreRotateReverse 9s linear infinite;

}


@keyframes engineeringCoreRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes engineeringCoreRotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}


/* =========================================================
   12.10 — CORE CENTER
   ========================================================= */

.engineering-core-center{

    position:relative;

    width:38%;

    aspect-ratio:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(184,137,63,.5);

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(184,137,63,.24),
        rgba(0,0,0,.35)
    );

    box-shadow:

    0 0 35px rgba(184,137,63,.20);

}


.engineering-core-center::after{

    content:"";

    position:absolute;

    inset:-12px;

    border:1px solid rgba(184,137,63,.16);

    border-radius:50%;

    animation:
    engineeringCorePulse 2.4s ease-out infinite;

}


@keyframes engineeringCorePulse{

    0%{

        transform:scale(.8);

        opacity:.8;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}


.engineering-core-center span{

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

    font-weight:700;

    letter-spacing:.18em;

}


.engineering-core-center small{

    margin-top:5px;

    font-size:.48rem;

    letter-spacing:.2em;

    opacity:.55;

}


/* =========================================================
   12.11 — DATA PULSE SYSTEM
   ========================================================= */

.engineering-data-pulse{

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#fff;

    box-shadow:

    0 0 8px rgba(255,255,255,.9),

    0 0 22px rgba(184,137,63,.9);

}


.engineering-data-pulse.pulse-one{

    top:28%;

    right:34%;

    animation:
    engineeringPulseOne 4s linear infinite;

}


.engineering-data-pulse.pulse-two{

    top:68%;

    right:30%;

    animation:
    engineeringPulseTwo 5s linear infinite;

}


@keyframes engineeringPulseOne{

    0%{

        transform:translate(0,0);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    80%{

        transform:translate(170px,35px);

        opacity:1;

    }

    100%{

        transform:translate(210px,45px);

        opacity:0;

    }

}


@keyframes engineeringPulseTwo{

    0%{

        transform:translate(0,0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        transform:translate(150px,-40px);

        opacity:1;

    }

    100%{

        transform:translate(190px,-50px);

        opacity:0;

    }

}


/* =========================================================
   12.12 — EXECUTIVE CTA
   ========================================================= */

.engineering-final-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    position:relative;

    z-index:5;

}


.engineering-final-actions a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:0 28px;

    border-radius:999px;

    text-decoration:none;

    overflow:hidden;

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}


.engineering-final-actions a::before{

    content:"";

    position:absolute;

    inset:0;

    transform:
    translateX(-110%);

    background:
    linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transition:
    transform .6s ease;

}


.engineering-final-actions a:hover::before{

    transform:
    translateX(110%);

}


.engineering-final-actions a:hover{

    transform:
    translateY(-3px);

}


/* =========================================================
   12.13 — FINAL TECHNICAL STATUS BAR
   ========================================================= */

.engineering-final-status{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

    margin-top:42px;

    padding-top:22px;

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

}


.engineering-status-item{

    display:flex;

    align-items:center;

    gap:9px;

    font-size:.72rem;

    letter-spacing:.12em;

    text-transform:uppercase;

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

}


.engineering-status-item::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:currentColor;

    box-shadow:
    0 0 12px currentColor;

    animation:
    engineeringStatusPulse 2s ease-in-out infinite;

}


@keyframes engineeringStatusPulse{

    0%,
    100%{

        opacity:.35;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.2);

    }

}


/* =========================================================
   12.14 — PREMIUM CLOSING REVEAL
   ========================================================= */

.engineering-final-system{

    animation:
    engineeringFinalReveal 1.2s ease both;

}


@keyframes engineeringFinalReveal{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   12.15 — RESPONSIVE ENGINEERING CTA
   ========================================================= */

@media (max-width:900px){

    .engineering-final-panel{

        padding:55px 35px;

    }

    .engineering-final-core{

        position:relative;

        top:auto;

        right:auto;

        transform:none;

        width:180px;

        margin:55px auto 0;

    }

    .engineering-final-core{

        animation:
        engineeringCoreFloatMobile 5s ease-in-out infinite;

    }

}


@keyframes engineeringCoreFloatMobile{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


@media (max-width:600px){

    .engineering-final-system{

        padding:
        70px 0;

    }

    .engineering-final-panel{

        padding:
        42px 22px;

        border-radius:24px;

    }

    .engineering-final-content h2{

        font-size:
        clamp(2rem,10vw,3.2rem);

    }

    .engineering-final-content p{

        line-height:1.75;

    }

    .engineering-final-actions{

        flex-direction:column;

    }

    .engineering-final-actions a{

        width:100%;

    }

    .engineering-final-status{

        flex-direction:column;

        gap:14px;

    }

    .engineering-final-core{

        width:150px;

    }

}


/* =========================================================
   12.16 — REDUCED MOTION SAFETY
   ========================================================= */

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

    .engineering-final-system,
    .engineering-final-panel::after,
    .engineering-final-core,
    .engineering-final-core::before,
    .engineering-final-core::after,
    .engineering-core-center::after,
    .engineering-data-pulse,
    .engineering-status-item::before{

        animation:none !important;

    }

    }
























/* ========================================================= */
/*                                                         */
/*       END OF ARS GLOBAL VISUAL DNA                      */
/*       START OF ARS COMPANY UNIQUE DESIGN                */
/*                                                         */
/* ========================================================= */