/* =========================================================
   ARS HERITAGE GROUP — HOME
   style-home.css
   =========================================================
   PHASE 01
   DESIGN SYSTEM
   GLOBAL RESET
   HEADER
   HERO FOUNDATION
   ========================================================= */


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

:root{

    /* =====================================================
       BRAND FOUNDATION
       ===================================================== */

    --ars-black:
        #020202;

    --ars-black-soft:
        #070707;

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

    --ars-black-brown:
        #160E08;


    /* =====================================================
       PRIMARY GOLD
       HOME VERSION
       STRONGER THAN ARS BRAIN TEST
       ===================================================== */

    --ars-gold:
        #D8B36A;

    --ars-gold-light:
        #F0D18D;

    --ars-gold-soft:
        #E1C078;

    --ars-gold-dark:
        #9B6D32;

    --ars-gold-highlight:
        #FFF3C7;

    --ars-gold-white:
        #FFF9E5;


    /* =====================================================
       METALLIC DEPTH
       ===================================================== */

    --ars-metal-shadow:
        #4B2D16;

    --ars-metal-brown:
        #70451F;

    --ars-metal-bronze:
        #9C6930;

    --ars-metal-gold:
        #D8B36A;

    --ars-metal-champagne:
        #F0D18D;

    --ars-metal-highlight:
        #FFF3C7;


    /* =====================================================
       BRONZE
       STRONGER FOR METALLIC DEPTH
       ===================================================== */

    --ars-bronze:
        #8F5F2D;

    --ars-bronze-soft:
        #B77A3A;

    --ars-bronze-light:
        #D09A58;


    /* =====================================================
       DEEP NAVY
       SECONDARY BRAND SUPPORT
       ===================================================== */

    --ars-navy:
        #0A1726;

    --ars-navy-soft:
        #102235;

    --ars-navy-light:
        #19324A;


    /* =====================================================
       WARM WHITE
       ===================================================== */

    --ars-white:
        #F7F2E8;

    --ars-white-soft:
        #DDD6CA;

    --ars-white-muted:
        #AAA296;


    /* =====================================================
       CINEMATIC SUPPORT COLORS
       NOT PRIMARY BRAND COLORS
       ===================================================== */

    --ars-shadow-brown:
        #351D10;

    --ars-shadow-red:
        #241010;

    --ars-shadow-yellow:
        #604617;


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

    --ars-gold-glow:
        rgba(216,179,106,.22);

    --ars-gold-glow-medium:
        rgba(216,179,106,.32);

    --ars-gold-glow-strong:
        rgba(240,209,141,.48);


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

    --ars-glass:
        rgba(10,9,8,.58);

    --ars-glass-warm:
        rgba(28,19,11,.46);

    --ars-glass-navy:
        rgba(10,23,38,.24);

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

    --ars-glass-border:
        rgba(216,179,106,.36);

    --ars-glass-border-hover:
        rgba(240,209,141,.86);


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

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

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


    /* =====================================================
       RADIUS
       ===================================================== */

    --ars-radius:
        24px;

    --ars-radius-small:
        14px;

    --ars-radius-large:
        32px;


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

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


    /* =====================================================
       PAGE WIDTH
       HOME IS WIDER THAN INNER PAGES
       ===================================================== */

    --ars-home-width:
        min(1900px, 96vw);

}


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

*{

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html{

    scroll-behavior:
        smooth;

    background:
        var(--ars-black);

}


body{

    min-height:
        100vh;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(216,179,106,.09),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 35%,
            rgba(10,23,38,.18),
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #020202 0%,
            #070605 42%,
            #030303 100%
        );

    color:
        var(--ars-white);

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

    font-size:
        15px;

    line-height:
        1.8;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================================
   03 — GLOBAL LINKS
   ========================================================= */

a{

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   04 — GLOBAL IMAGES
   ========================================================= */

img{

    display:
        block;

    max-width:
        100%;

}


/* =========================================================
   05 — MAIN CONTAINER
   ========================================================= */

.container{

    width:
        var(--ars-home-width);

    margin:
        0 auto;

}


/* =========================================================
   06 — PREMIUM FIXED HEADER
   ========================================================= */

.main-header{

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        82px;

    z-index:
        1000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:

        linear-gradient(
            180deg,
            rgba(2,2,2,.78),
            rgba(2,2,2,.34)
        );

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid
        rgba(216,179,106,.18);

    box-shadow:
        0 10px 40px
        rgba(0,0,0,.42);

}


/* =========================================================
   07 — HEADER BRAND
   ========================================================= */

.header-brand{

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        100%;

}


/* =========================================================
   08 — MOTHER LOGO
   ========================================================= */

.mother-logo{

    width:
        auto;

    height:
        58px;

    object-fit:
        contain;

    opacity:
        .96;

    filter:

        drop-shadow(
            0 0 12px
            rgba(216,179,106,.18)
        );

    transition:
        var(--ars-transition);

}


.mother-logo:hover{

    transform:
        scale(1.035);

    filter:

        drop-shadow(
            0 0 20px
            rgba(240,209,141,.42)
        );

}


/* =========================================================
   09 — HERO FOUNDATION
   ========================================================= */

.hero{

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    padding-top:
        82px;

    overflow:
        hidden;

    isolation:
        isolate;

}


/* =========================================================
   10 — HERO BACKGROUND
   ========================================================= */

.hero-background{

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    background:

        radial-gradient(
            ellipse at 50% 18%,
            rgba(216,179,106,.16),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 50% 42%,
            rgba(143,95,45,.10),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 15% 40%,
            rgba(10,23,38,.22),
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #030303 0%,
            #080705 48%,
            #030303 100%
        );

}


/* =========================================================
   11 — HERO ATMOSPHERIC GLOW
   ========================================================= */

.hero-background::before{

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 50% 28%,
            rgba(255,243,199,.07),
            transparent 18%
        ),

        radial-gradient(
            circle at 50% 55%,
            rgba(216,179,106,.06),
            transparent 34%
        );

    pointer-events:
        none;

}


/* =========================================================
   12 — HERO WRAPPER
   ========================================================= */

.hero-wrapper{

    position:
        relative;

    min-height:
        calc(100vh - 82px);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

}


/* =========================================================
   13 — HERO CONTENT
   TEMPORARY POSITION
   ORBIT WILL BE PLACED ABOVE THIS
   ========================================================= */

.hero-content{

    position:
        relative;

    z-index:
        20;

    width:
        min(900px, 90vw);

    margin-top:
        20px;

    padding:
        40px 20px 80px;

    text-align:
        center;

}


/* =========================================================
   14 — HERO LABEL
   ========================================================= */

.hero-label{

    display:
        inline-block;

    margin-bottom:
        16px;

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

    font-size:
        .78rem;

    font-weight:
        600;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

    text-shadow:
        0 0 18px
        rgba(216,179,106,.24);

}


/* =========================================================
   15 — HERO TITLE
   ========================================================= */

.hero-content h1{

    color:
        var(--ars-white);

    font-size:
        clamp(2.4rem, 5vw, 5.4rem);

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -.035em;

    text-shadow:

        0 2px 25px
        rgba(0,0,0,.75),

        0 0 40px
        rgba(216,179,106,.08);

}


/* =========================================================
   16 — HERO DESCRIPTION
   ========================================================= */

.hero-content p{

    max-width:
        760px;

    margin:
        24px auto 0;

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

    font-size:
        1rem;

    line-height:
        1.9;

}


/* =========================================================
   17 — HERO BUTTONS
   ========================================================= */

.hero-buttons{

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;

    margin-top:
        30px;

}


/* =========================================================
   18 — PRIMARY BUTTON
   ========================================================= */

.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 26px;

    border-radius:
        999px;

    font-size:
        .82rem;

    letter-spacing:
        .08em;

    transition:
        var(--ars-transition);

}


.btn-primary{

    color:
        #080604;

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

    box-shadow:

        0 10px 30px
        rgba(216,179,106,.18),

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

}


.btn-primary:hover{

    transform:
        translateY(-3px);

    box-shadow:

        0 16px 42px
        rgba(216,179,106,.34),

        0 0 30px
        rgba(240,209,141,.16);

}


.btn-secondary{

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

    background:
        rgba(10,9,8,.42);

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

    backdrop-filter:
        blur(12px);

}


.btn-secondary:hover{

    color:
        var(--ars-white);

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

    background:
        rgba(216,179,106,.08);

    transform:
        translateY(-3px);

}


/* =========================================================
   19 — RESPONSIVE FOUNDATION
   ========================================================= */

@media (max-width: 900px){

    .main-header{

        height:
            72px;

    }

    .mother-logo{

        height:
            50px;

    }

    .hero{

        padding-top:
            72px;

    }

    .hero-wrapper{

        min-height:
            calc(100vh - 72px);

    }

    .hero-content{

        padding-top:
            30px;

    }

}


@media (max-width: 600px){

    .container{

        width:
            92vw;

    }

    .hero-content h1{

        font-size:
            clamp(2rem, 10vw, 3.2rem);

    }

    .hero-content p{

        font-size:
            .92rem;

    }

    .hero-buttons{

        flex-direction:
            column;

    }

    .btn-primary,
    .btn-secondary{

        width:
            min(280px, 90vw);

    }

          }

/* ========================================================= */
/* ========================================================= */
/*                                                             */
/*        ARS HERITAGE GROUP — HOME ORBITAL SYSTEM             */
/*        PREMIUM 3D GLASS • GOLD • CINEMATIC ORBIT             */
/*                                                             */
/*        CENTRAL CORE                                          */
/*        6 INNER ORBITALS                                      */
/*        7 OUTER ORBITALS                                      */
/*                                                             */
/*        INNER  → CLOCKWISE                                    */
/*        OUTER  → COUNTER-CLOCKWISE                            */
/*                                                             */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — ORBITAL SYSTEM WRAPPER */
/* ========================================================= */

.ars-orbit{

    position:relative;

    width:1500px;
    height:1500px;

    margin:0 auto;

    display:flex;

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

    perspective:1800px;

    transform-style:preserve-3d;

    z-index:20;

}


/* ========================================================= */
/* 02 — CENTRAL ARS HERITAGE GROUP CORE */
/* ========================================================= */

.orbit-core{

    position:absolute;

    top:50%;
    left:50%;

    width:230px;
    height:230px;

    transform:

        translate(-50%,-50%)
        translateZ(120px);

    border-radius:50%;

    display:flex;

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

    z-index:100;

    text-decoration:none;

    background:

        radial-gradient(

            circle at 50% 42%,

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

            rgba(255,255,255,.055) 42%,

            rgba(12,10,8,.48) 100%

        );

    border:

        1px solid

        rgba(255,240,189,.34);

    box-shadow:

        0 0 45px
        rgba(200,164,93,.34),

        0 0 100px
        rgba(200,164,93,.16),

        inset 0 0 35px
        rgba(255,255,255,.10),

        inset 0 0 80px
        rgba(200,164,93,.08);

    backdrop-filter:

        blur(16px)
        saturate(130%);

    -webkit-backdrop-filter:

        blur(16px)
        saturate(130%);

    transition:

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

        box-shadow .5s ease;

}


.orbit-core img{

    width:78%;

    height:auto;

    object-fit:contain;

    filter:

        drop-shadow(

            0 0 22px
            rgba(227,194,122,.55)

        );

    transition:

        transform .7s ease,

        filter .5s ease;

}


/* ========================================================= */
/* 03 — CENTRAL CORE HOVER */
/* ========================================================= */

.orbit-core:hover{

    transform:

        translate(-50%,-50%)
        translateZ(155px)
        scale(1.08);

    box-shadow:

        0 0 55px
        rgba(227,194,122,.48),

        0 0 130px
        rgba(200,164,93,.22),

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

        inset 0 0 90px
        rgba(200,164,93,.12);

}


.orbit-core:hover img{

    transform:

        scale(1.05);

    filter:

        drop-shadow(

            0 0 32px
            rgba(255,240,189,.80)

        );

}


/* ========================================================= */
/* 04 — INNER ORBIT RING */
/* ========================================================= */

.ars-orbit::before{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:720px;
    height:720px;

    transform:

        translate(-50%,-50%)
        rotateX(68deg);

    border-radius:50%;

    border:

        1px solid
        rgba(255,220,150,.22);

    box-shadow:

        0 0 30px
        rgba(200,164,93,.10),

        0 0 80px
        rgba(200,164,93,.04),

        inset 0 0 25px
        rgba(255,255,255,.04);

    pointer-events:none;

}


/* ========================================================= */
/* 05 — OUTER ORBIT RING */
/* ========================================================= */

.ars-orbit::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:1080px;
    height:1080px;

    transform:

        translate(-50%,-50%)
        rotateX(68deg);

    border-radius:50%;

    border:

        1px solid
        rgba(255,220,150,.15);

    box-shadow:

        0 0 45px
        rgba(200,164,93,.08),

        0 0 100px
        rgba(200,164,93,.035),

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

    pointer-events:none;

}


/* ========================================================= */
/* 06 — ORBIT ITEM BASE */
/* ========================================================= */

.orbit-item{

    position:absolute;

    top:50%;
    left:50%;

    width:125px;
    height:125px;

    margin-left:-62.5px;
    margin-top:-62.5px;

    display:flex;

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

    z-index:30;

    transform-style:preserve-3d;

}


/* ========================================================= */
/* 07 — ORBIT ITEM GLASS */
/* ========================================================= */

.orbit-item a{

    width:100%;
    height:100%;

    display:flex;

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

    border-radius:50%;

    text-decoration:none;

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.16),

            rgba(255,255,255,.045) 45%,

            rgba(12,10,8,.42)

        );

    border:

        1px solid
        rgba(255,240,189,.28);

    box-shadow:

        0 16px 45px
        rgba(0,0,0,.42),

        0 0 25px
        rgba(200,164,93,.12),

        inset 0 0 25px
        rgba(255,255,255,.06),

        inset 0 0 55px
        rgba(200,164,93,.035);

    backdrop-filter:

        blur(14px)
        saturate(135%);

    -webkit-backdrop-filter:

        blur(14px)
        saturate(135%);

    transition:

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

        box-shadow .5s ease,

        background .5s ease,

        border-color .5s ease;

}


/* ========================================================= */
/* 08 — ORBIT ITEM IMAGE */
/* ========================================================= */

.orbit-item img{

    width:72%;
    height:72%;

    object-fit:contain;

    filter:

        drop-shadow(

            0 0 12px
            rgba(227,194,122,.32)

        );

    transition:

        transform .5s ease,

        filter .5s ease;

}


/* ========================================================= */
/* 09 — ORBIT ITEM HOVER */
/* ========================================================= */

.orbit-item a:hover{

    transform:

        translateZ(60px)
        scale(1.22);

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.24),

            rgba(255,255,255,.07) 45%,

            rgba(200,164,93,.06)

        );

    border-color:

        rgba(255,240,189,.48);

    box-shadow:

        0 25px 60px
        rgba(0,0,0,.52),

        0 0 40px
        rgba(227,194,122,.34),

        0 0 90px
        rgba(200,164,93,.12),

        inset 0 0 30px
        rgba(255,255,255,.12),

        inset 0 0 60px
        rgba(200,164,93,.06);

}


.orbit-item a:hover img{

    transform:

        scale(1.08);

    filter:

        drop-shadow(

            0 0 20px
            rgba(255,240,189,.72)

        );

}


/* ========================================================= */
/* 10 — INNER ORBIT */
/* ========================================================= */

.orbit-1,
.orbit-2,
.orbit-3,
.orbit-4,
.orbit-5,
.orbit-6{

    animation:

        orbit-six
        34s
        linear
        infinite;

}


/* ========================================================= */
/* 11 — INNER ORBIT ANGLES */
/* ========================================================= */

.orbit-1{

    --angle:0deg;

}


.orbit-2{

    --angle:60deg;

}


.orbit-3{

    --angle:120deg;

}


.orbit-4{

    --angle:180deg;

}


.orbit-5{

    --angle:240deg;

}


.orbit-6{

    --angle:300deg;

}


/* ========================================================= */
/* 12 — INNER ORBIT ANIMATION */
/* ========================================================= */

@keyframes orbit-six{

    0%{

        transform:

            rotateZ(var(--angle))

            translateY(-330px)

            rotateZ(

                calc(

                    var(--angle) * -1

                )

            )

            rotateX(0deg);

    }


    25%{

        transform:

            rotateZ(

                calc(

                    var(--angle) + 90deg

                )

            )

            translateY(-330px)

            rotateZ(

                calc(

                    (

                        var(--angle) + 90deg

                    ) * -1

                )

            )

            rotateX(8deg);

    }


    50%{

        transform:

            rotateZ(

                calc(

                    var(--angle) + 180deg

                )

            )

            translateY(-330px)

            rotateZ(

                calc(

                    (

                        var(--angle) + 180deg

                    ) * -1

                )

            )

            rotateX(0deg);

    }


    75%{

        transform:

            rotateZ(

                calc(

                    var(--angle) + 270deg

                )

            )

            translateY(-330px)

            rotateZ(

                calc(

                    (

                        var(--angle) + 270deg

                    ) * -1

                )

            )

            rotateX(-8deg);

    }


    100%{

        transform:

            rotateZ(

                calc(

                    var(--angle) + 360deg

                )

            )

            translateY(-330px)

            rotateZ(

                calc(

                    (

                        var(--angle) + 360deg

                    ) * -1

                )

            )

            rotateX(0deg);

    }

}


/* ========================================================= */
/* 13 — OUTER ORBIT */
/* ========================================================= */

.orbit-7,
.orbit-8,
.orbit-9,
.orbit-10,
.orbit-11,
.orbit-12,
.orbit-13{

    animation:

        orbit-seven
        48s
        linear
        infinite;

}


/* ========================================================= */
/* 14 — OUTER ORBIT ANGLES */
/* ========================================================= */

.orbit-7{

    --angle:0deg;

}


.orbit-8{

    --angle:51.428deg;

}


.orbit-9{

    --angle:102.856deg;

}


.orbit-10{

    --angle:154.284deg;

}


.orbit-11{

    --angle:205.712deg;

}


.orbit-12{

    --angle:257.140deg;

}


.orbit-13{

    --angle:308.568deg;

}


/* ========================================================= */
/* 15 — OUTER ORBIT ANIMATION */
/* ========================================================= */

@keyframes orbit-seven{

    0%{

        transform:

            rotateZ(var(--angle))

            translateY(-470px)

            rotateZ(

                calc(

                    var(--angle) * -1

                )

            )

            rotateX(0deg);

    }


    25%{

        transform:

            rotateZ(

                calc(

                    var(--angle) - 90deg

                )

            )

            translateY(-470px)

            rotateZ(

                calc(

                    (

                        var(--angle) - 90deg

                    ) * -1

                )

            )

            rotateX(-8deg);

    }


    50%{

        transform:

            rotateZ(

                calc(

                    var(--angle) - 180deg

                )

            )

            translateY(-470px)

            rotateZ(

                calc(

                    (

                        var(--angle) - 180deg

                    ) * -1

                )

            )

            rotateX(0deg);

    }


    75%{

        transform:

            rotateZ(

                calc(

                    var(--angle) - 270deg

                )

            )

            translateY(-470px)

            rotateZ(

                calc(

                    (

                        var(--angle) - 270deg

                    ) * -1

                )

            )

            rotateX(8deg);

    }


    100%{

        transform:

            rotateZ(

                calc(

                    var(--angle) - 360deg

                )

            )

            translateY(-470px)

            rotateZ(

                calc(

                    (

                        var(--angle) - 360deg

                    ) * -1

                )

            )

            rotateX(0deg);

    }

}


/* ========================================================= */
/* 16 — ORBIT HOVER PAUSE */
/* ========================================================= */

.ars-orbit:hover .orbit-item{

    animation-play-state:

        paused;

}


/* ========================================================= */
/* 17 — ORBITAL CINEMATIC DEPTH */
/* ========================================================= */

.ars-orbit{

    filter:

        drop-shadow(

            0 0 35px
            rgba(200,164,93,.08)

        );

}


/* ========================================================= */
/* 18 — HOME HERO ORBIT POSITION */
/* ========================================================= */

.hero-wrapper{

    position:relative;

    width:100%;

    min-height:160vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    overflow:visible;

}


.hero-wrapper .ars-orbit{

    position:relative;

    margin-top:-70px;

    flex-shrink:0;

}


/* ========================================================= */
/* 19 — HERO CONTENT POSITION */
/* ========================================================= */

.hero-content{

    position:relative;

    z-index:200;

    width:

        min(900px,90vw);

    margin-top:-280px;

    text-align:center;

    transform:

        translateZ(80px);

}


/* ========================================================= */
/* 20 — LARGE DESKTOP */
/* ========================================================= */

@media (min-width:1400px){

    .ars-orbit{

        width:1500px;
        height:1500px;

    }

}


/* ========================================================= */
/* 21 — TABLET */
/* ========================================================= */

@media (max-width:1100px){

    .ars-orbit{

        width:1100px;
        height:1100px;

        transform:

            scale(.82);

    }


    .hero-wrapper{

        min-height:140vh;

    }


    .hero-wrapper .ars-orbit{

        margin-top:-50px;

    }


    .hero-content{

        margin-top:-220px;

    }

}


/* ========================================================= */
/* 22 — MOBILE */
/* ========================================================= */

@media (max-width:768px){

    .ars-orbit{

        width:900px;
        height:900px;

        transform:

            scale(.64);

    }


    .hero-wrapper{

        min-height:125vh;

    }


    .hero-wrapper .ars-orbit{

        margin-top:-30px;

    }


    .hero-content{

        margin-top:-170px;

        width:90vw;

    }

}


/* ========================================================= */
/* 23 — SMALL MOBILE */
/* ========================================================= */

@media (max-width:520px){

    .ars-orbit{

        width:800px;
        height:800px;

        transform:

            scale(.54);

    }

}


/* ========================================================= */
/* 24 — ACCESSIBILITY */
/* ========================================================= */

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

    .orbit-1,
    .orbit-2,
    .orbit-3,
    .orbit-4,
    .orbit-5,
    .orbit-6,
    .orbit-7,
    .orbit-8,
    .orbit-9,
    .orbit-10,
    .orbit-11,
    .orbit-12,
    .orbit-13{

        animation:

            none;

    }

}

/* ========================================================= */
/* ========================================================= */
/*                                                             */
/*        ARS HERITAGE GROUP — PREMIUM HOME HEADER + HERO      */
/*        CINEMATIC BLACK • GOLD • BRONZE • NAVY • GLASS        */
/*                                                             */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — GLOBAL HERO FOUNDATION */
/* ========================================================= */

.hero{

    position:relative;

    width:100%;

    min-height:200vh;

    overflow:hidden;

    background:

        radial-gradient(

            circle at 50% 28%,

            rgba(200,164,93,.16),

            transparent 22%

        ),

        radial-gradient(

            circle at 18% 35%,

            rgba(154,108,56,.10),

            transparent 28%

        ),

        radial-gradient(

            circle at 82% 42%,

            rgba(12,23,36,.22),

            transparent 30%

        ),

        linear-gradient(

            180deg,

            #030303 0%,

            #070707 42%,

            #0C0906 72%,

            #030303 100%

        );

    isolation:isolate;

}


/* ========================================================= */
/* 02 — HERO BACKGROUND */
/* ========================================================= */

.hero-background{

    position:absolute;

    inset:0;

    z-index:-5;

    pointer-events:none;

    background:

        radial-gradient(

            ellipse at 50% 25%,

            rgba(227,194,122,.12),

            transparent 34%

        ),

        radial-gradient(

            ellipse at 50% 60%,

            rgba(200,164,93,.07),

            transparent 42%

        );

    animation:

        hero-light-breathe
        9s
        ease-in-out
        infinite alternate;

}


/* ========================================================= */
/* 03 — CINEMATIC GOLD LIGHT */
/* ========================================================= */

.hero-background::before{

    content:"";

    position:absolute;

    top:4%;

    left:50%;

    width:850px;

    height:850px;

    transform:

        translateX(-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,240,189,.10),

            rgba(200,164,93,.055) 28%,

            transparent 68%

        );

    filter:

        blur(30px);

    opacity:.75;

}


/* ========================================================= */
/* 04 — BRONZE CINEMATIC DEPTH */
/* ========================================================= */

.hero-background::after{

    content:"";

    position:absolute;

    left:-15%;

    bottom:12%;

    width:70%;

    height:45%;

    background:

        radial-gradient(

            ellipse,

            rgba(118,80,42,.09),

            transparent 68%

        );

    filter:

        blur(60px);

    transform:

        rotate(-12deg);

}


/* ========================================================= */
/* 05 — HERO STARS / PARTICLES */
/* ========================================================= */

.hero-stars{

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    opacity:.42;

    background-image:

        radial-gradient(

            circle,

            rgba(255,240,189,.45) 1px,

            transparent 1.5px

        );

    background-size:

        180px 180px;

    animation:

        stars-drift
        35s
        linear
        infinite;

}


.hero-stars-2{

    opacity:.20;

    background-size:

        280px 280px;

    animation:

        stars-drift-reverse
        55s
        linear
        infinite;

}


/* ========================================================= */
/* 06 — HERO CONTAINER */
/* ========================================================= */

.hero > .container{

    position:relative;

    width:100%;

    min-height:200vh;

    display:flex;

    justify-content:center;

}


/* ========================================================= */
/* 07 — HERO WRAPPER */
/* ========================================================= */

.hero-wrapper{

    position:relative;

    width:100%;

    min-height:200vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

}


/* ========================================================= */
/* 08 — HEADER */
/* ========================================================= */

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:92px;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            180deg,

            rgba(3,3,3,.78),

            rgba(3,3,3,.38),

            transparent

        );

    border-bottom:

        1px solid

        rgba(200,164,93,.10);

    backdrop-filter:

        blur(12px)
        saturate(120%);

    -webkit-backdrop-filter:

        blur(12px)
        saturate(120%);

}


/* ========================================================= */
/* 09 — HEADER GLASS LIGHT */
/* ========================================================= */

.main-header::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-1px;

    width:42%;

    height:1px;

    transform:

        translateX(-50%);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(200,164,93,.55),

            rgba(255,240,189,.85),

            rgba(200,164,93,.55),

            transparent

        );

    opacity:.65;

}


/* ========================================================= */
/* 10 — HEADER BRAND */
/* ========================================================= */

.header-brand{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

}


/* ========================================================= */
/* 11 — MOTHER LOGO */
/* ========================================================= */

.main-header img.mother-logo{

    width:88px !important;

    height:auto !important;

    max-width:88px !important;

    object-fit:contain !important;

    opacity:.96;

    filter:

        drop-shadow(

            0 0 12px
            rgba(200,164,93,.18)

        );

    transition:

        transform .5s ease,

        filter .5s ease,

        opacity .5s ease;

}


.main-header img.mother-logo:hover{

    transform:

        scale(1.06);

    opacity:1;

    filter:

        drop-shadow(

            0 0 22px
            rgba(227,194,122,.42)

        );

}


/* ========================================================= */
/* 12 — HERO ORBIT POSITION */
/* ========================================================= */

.hero-wrapper .ars-orbit{

    position:relative;

    margin-top:

        -45px;

    flex-shrink:0;

}


/* ========================================================= */
/* 13 — HERO CONTENT */
/* ========================================================= */

.hero-content{

    position:relative;

    z-index:250;

    width:

        min(920px,90vw);

    margin-top:

        -330px;

    text-align:center;

    transform:

        translateZ(100px);

}


/* ========================================================= */
/* 14 — HERO LABEL */
/* ========================================================= */

.hero-label{

    display:inline-block;

    margin-bottom:24px;

    padding:

        9px 20px;

    border:

        1px solid

        rgba(200,164,93,.28);

    border-radius:

        999px;

    background:

        rgba(12,10,8,.38);

    color:

        #E3C27A;

    font-size:

        .72rem;

    letter-spacing:

        .28em;

    text-transform:

        uppercase;

    backdrop-filter:

        blur(12px);

    -webkit-backdrop-filter:

        blur(12px);

    box-shadow:

        0 0 25px

        rgba(200,164,93,.06);

}


/* ========================================================= */
/* 15 — HERO TITLE */
/* ========================================================= */

.hero-content h1{

    margin:

        0 auto 28px;

    max-width:

        900px;

    color:

        #F4F0E7;

    font-size:

        clamp(

            2.6rem,

            5vw,

            5.8rem

        );

    line-height:

        1.05;

    font-weight:

        600;

    letter-spacing:

        -.025em;

    text-shadow:

        0 0 35px

        rgba(200,164,93,.12);

}


/* ========================================================= */
/* 16 — GOLD TITLE ACCENT */
/* ========================================================= */

.hero-content h1::first-line{

    color:

        #E3C27A;

}


/* ========================================================= */
/* 17 — HERO DESCRIPTION */
/* ========================================================= */

.hero-content p{

    max-width:

        780px;

    margin:

        0 auto 38px;

    color:

        #D8D1C5;

    font-size:

        1.05rem;

    line-height:

        1.9;

    font-weight:

        400;

    opacity:

        .88;

}


/* ========================================================= */
/* 18 — HERO BUTTONS */
/* ========================================================= */

.hero-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:

        18px;

    flex-wrap:wrap;

}


/* ========================================================= */
/* 19 — PRIMARY BUTTON */
/* ========================================================= */

.btn-primary{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:

        220px;

    padding:

        15px 30px;

    border-radius:

        999px;

    border:

        1px solid

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

    color:

        #050505;

    background:

        linear-gradient(

            105deg,

            #8A632F,

            #C8A45D 28%,

            #E3C27A 52%,

            #FFF0BD 58%,

            #C8A45D 75%,

            #8A632F

        );

    font-weight:

        600;

    text-decoration:none;

    box-shadow:

        0 12px 35px

        rgba(0,0,0,.42),

        0 0 25px

        rgba(200,164,93,.18);

    overflow:hidden;

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:

        skewX(-20deg);

    background:

        linear-gradient(

            90deg,

            transparent,

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

            transparent

        );

    transition:

        left .8s ease;

}


.btn-primary:hover{

    transform:

        translateY(-4px)
        scale(1.03);

    box-shadow:

        0 18px 45px

        rgba(0,0,0,.52),

        0 0 45px

        rgba(227,194,122,.32);

}


.btn-primary:hover::before{

    left:140%;

}


/* ========================================================= */
/* 20 — SECONDARY BUTTON */
/* ========================================================= */

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:

        220px;

    padding:

        15px 30px;

    border-radius:

        999px;

    border:

        1px solid

        rgba(255,240,189,.24);

    color:

        #E3C27A;

    background:

        rgba(12,10,8,.46);

    text-decoration:none;

    backdrop-filter:

        blur(14px);

    -webkit-backdrop-filter:

        blur(14px);

    box-shadow:

        0 12px 35px

        rgba(0,0,0,.32),

        inset 0 0 20px

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

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease,

        background .45s ease;

}


.btn-secondary:hover{

    transform:

        translateY(-4px);

    border-color:

        rgba(227,194,122,.58);

    background:

        rgba(200,164,93,.08);

    box-shadow:

        0 18px 45px

        rgba(0,0,0,.46),

        0 0 30px

        rgba(200,164,93,.14);

}


/* ========================================================= */
/* 21 — HERO BOTTOM FADE */
/* ========================================================= */

.hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:280px;

    z-index:5;

    pointer-events:none;

    background:

        linear-gradient(

            180deg,

            transparent,

            #030303

        );

}


/* ========================================================= */
/* 22 — HERO LIGHT ANIMATION */
/* ========================================================= */

@keyframes hero-light-breathe{

    0%{

        transform:

            scale(1);

        opacity:.75;

    }

    100%{

        transform:

            scale(1.08);

        opacity:1;

    }

}


/* ========================================================= */
/* 23 — STARS DRIFT */
/* ========================================================= */

@keyframes stars-drift{

    0%{

        transform:

            translate3d(0,0,0);

    }

    50%{

        transform:

            translate3d(-20px,15px,0);

    }

    100%{

        transform:

            translate3d(0,0,0);

    }

}


/* ========================================================= */
/* 24 — STARS REVERSE DRIFT */
/* ========================================================= */

@keyframes stars-drift-reverse{

    0%{

        transform:

            translate3d(0,0,0);

    }

    50%{

        transform:

            translate3d(18px,-12px,0);

    }

    100%{

        transform:

            translate3d(0,0,0);

    }

}


/* ========================================================= */
/* 25 — TABLET */
/* ========================================================= */

@media (max-width:1100px){

    .main-header{

        height:

            82px;

    }


    .hero{

        min-height:

            165vh;

    }


    .hero > .container{

        min-height:

            165vh;

    }


    .hero-wrapper{

        min-height:

            165vh;

    }


    .hero-wrapper .ars-orbit{

        margin-top:

            -30px;

    }


    .hero-content{

        margin-top:

            -250px;

    }

}


/* ========================================================= */
/* 26 — MOBILE */
/* ========================================================= */

@media (max-width:768px){

    .main-header{

        height:

            74px;

    }


    .main-header img.mother-logo{

        width:

            72px !important;

        max-width:

            72px !important;

    }


    .hero{

        min-height:

            140vh;

    }


    .hero > .container{

        min-height:

            140vh;

    }


    .hero-wrapper{

        min-height:

            140vh;

    }


    .hero-wrapper .ars-orbit{

        margin-top:

            -20px;

    }


    .hero-content{

        margin-top:

            -180px;

    }


    .hero-content p{

        font-size:

            .95rem;

        line-height:

            1.75;

    }


    .hero-buttons{

        gap:

            12px;

    }


    .btn-primary,
    .btn-secondary{

        width:

            min(300px,88vw);

    }

}


/* ========================================================= */
/* 27 — SMALL MOBILE */
/* ========================================================= */

@media (max-width:520px){

    .hero-content{

        margin-top:

            -150px;

    }


    .hero-label{

        font-size:

            .62rem;

        letter-spacing:

            .20em;

    }


    .hero-content h1{

        font-size:

            2.35rem;

    }


    .hero-content p{

        font-size:

            .9rem;

    }

}


/* ========================================================= */
/* 28 — REDUCED MOTION */
/* ========================================================= */

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

    .hero-background,
    .hero-stars,
    .hero-stars-2{

        animation:

            none;

    }


    .btn-primary,
    .btn-secondary,
    .orbit-core,
    .orbit-item a{

        transition:

            none;

    }

   }





<!-- ========================================================= -->
<!-- ARS HERITAGE GROUP — HOME ECOSYSTEM                       -->
<!-- 14 PREMIUM 3D GLASS CARDS                                 -->
<!-- 4 CORE DIVISIONS + 10 SPECIALIZED DIVISIONS               -->
<!-- ========================================================= -->

<section class="ars-home-ecosystem" id="ecosystem">

    <div class="container">


        <!-- ================================================= -->
        <!-- SECTION HEADER                                    -->
        <!-- ================================================= -->

        <div class="section-header ecosystem-header">

            <span class="section-label">
                ARS Heritage Ecosystem
            </span>

            <h2>
                One Vision.
                <br>
                Four Core Divisions.
            </h2>

            <p>
                An integrated automotive ecosystem where heritage,
                engineering, intelligence, design and future
                technologies evolve together.
            </p>

        </div>


        <!-- ================================================= -->
        <!-- 04 CORE MANAGEMENT CARDS                          -->
        <!-- ================================================= -->

        <div class="ars-core-grid">


            <!-- ================================================= -->
            <!-- 01 — ARS BRAIN                                   -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-core-card">

                <a
                    href="ars-brain.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Brain"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-brain.jpg"
                            alt="ARS Brain Automotive Intelligence"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-brain-logo.png"
                            alt="ARS Brain Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            CORE DIVISION
                        </span>

                        <h3>
                            ARS Brain
                        </h3>

                        <p>
                            Independent Automotive Computing
                            Platform for intelligent,
                            scalable and future-ready vehicles.
                        </p>

                        <span class="ars-card-action">
                            Explore ARS Brain →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 02 — ARS DESIGN                                   -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-core-card">

                <a
                    href="ars-design.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Design"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-design.jpg"
                            alt="ARS Design Automotive Revival"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-design-logo.png"
                            alt="ARS Design Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            CORE DIVISION
                        </span>

                        <h3>
                            ARS Design
                        </h3>

                        <p>
                            Automotive Design, Revival and
                            Product Development inspired by
                            timeless automotive heritage.
                        </p>

                        <span class="ars-card-action">
                            Explore ARS Design →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 03 — ARS COMPANY                                  -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-core-card">

                <a
                    href="ars-company.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Company"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-company.jpg"
                            alt="ARS Company Business Ecosystem"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-company-logo.png"
                            alt="ARS Company Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            CORE DIVISION
                        </span>

                        <h3>
                            ARS Company
                        </h3>

                        <p>
                            Business, Investment and Strategic
                            Partnerships shaping the future
                            of the ARS ecosystem.
                        </p>

                        <span class="ars-card-action">
                            Explore ARS Company →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 04 — ROSE AI                                      -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-core-card">

                <a
                    href="ars-rose-ai.html"
                    class="ars-card-link"
                    aria-label="Explore ROSE AI"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/rose-ai.jpg"
                            alt="ROSE AI Intelligent Automotive Assistant"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/rose-ai-logo.png"
                            alt="ROSE AI Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            CORE DIVISION
                        </span>

                        <h3>
                            ROSE AI
                        </h3>

                        <p>
                            Intelligent Automotive Assistant
                            designed to create a more natural
                            and connected driving experience.
                        </p>

                        <span class="ars-card-action">
                            Explore ROSE AI →
                        </span>

                    </div>

                </a>

            </article>


        </div>


        <!-- ================================================= -->
        <!-- 10 SPECIALIZED CARDS                              -->
        <!-- ================================================= -->

        <div class="ars-specialized-grid">


            <!-- ================================================= -->
            <!-- 05 — ZHR NAJI                                     -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-zhr-naji.html"
                    class="ars-card-link"
                    aria-label="Explore ZHR NAJI"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/zhr-naji.jpg"
                            alt="ZHR NAJI Safety Intelligence"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/zhr-naji-logo.png"
                            alt="ZHR NAJI Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            INTELLIGENT SAFETY
                        </span>

                        <h3>
                            ZHR NAJI
                        </h3>

                        <p>
                            Safety, Security and Intelligent
                            Protection.
                        </p>

                        <span class="ars-card-action">
                            Explore ZHR NAJI →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 06 — ARS PHILOSOPHY                               -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-philbelief-13-as.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Philosophy"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-philosophy.jpg"
                            alt="ARS Philosophy Heritage"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-philosophy-logo.png"
                            alt="ARS Philosophy Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            HERITAGE & PHILOSOPHY
                        </span>

                        <h3>
                            ARS Philosophy
                        </h3>

                        <p>
                            The principles and beliefs that
                            define the ARS visual and engineering
                            language.
                        </p>

                        <span class="ars-card-action">
                            Explore ARS Philosophy →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 07 — ARS ENGINEERING                              -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-engineering.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Engineering"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-engineering.jpg"
                            alt="ARS Engineering"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-engineering-logo.png"
                            alt="ARS Engineering Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            ENGINEERING
                        </span>

                        <h3>
                            ARS Engineering
                        </h3>

                        <p>
                            Advanced automotive engineering,
                            systems integration and technical
                            development.
                        </p>

                        <span class="ars-card-action">
                            Explore Engineering →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 08 — ARS MEDIA CENTER                             -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-media-center.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Media Center"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-media-center.jpg"
                            alt="ARS Media Center"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-media-center-logo.png"
                            alt="ARS Media Center Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            MEDIA
                        </span>

                        <h3>
                            ARS Media Center
                        </h3>

                        <p>
                            Stories, media and visual communication
                            from the ARS ecosystem.
                        </p>

                        <span class="ars-card-action">
                            Explore Media Center →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 09 — ARS PARTNERSHIP                              -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-partnership.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Partnership"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-partnership.jpg"
                            alt="ARS Partnership"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-partnership-logo.png"
                            alt="ARS Partnership Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            GLOBAL PARTNERSHIP
                        </span>

                        <h3>
                            ARS Partnership
                        </h3>

                        <p>
                            Building long-term relationships
                            with engineering, technology and
                            manufacturing partners.
                        </p>

                        <span class="ars-card-action">
                            Explore Partnership →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 10 — ARS OPEN DOOR                                -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-open-door.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Open Door"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-open-door.jpg"
                            alt="ARS Open Door"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-open-door-logo.png"
                            alt="ARS Open Door Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            OPEN ECOSYSTEM
                        </span>

                        <h3>
                            ARS Open Door
                        </h3>

                        <p>
                            A gateway for ideas, collaboration
                            and meaningful opportunities.
                        </p>

                        <span class="ars-card-action">
                            Explore Open Door →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 11 — ARS COLLECTION                               -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-collection.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Collection"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-collection.jpg"
                            alt="ARS Collection"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-collection-logo.png"
                            alt="ARS Collection Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            HERITAGE COLLECTION
                        </span>

                        <h3>
                            ARS Collection
                        </h3>

                        <p>
                            A curated expression of automotive
                            heritage, design and timeless identity.
                        </p>

                        <span class="ars-card-action">
                            Explore Collection →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 12 — BECOME ARS                                   -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="become-ars.html"
                    class="ars-card-link"
                    aria-label="Become ARS"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/become-ars.jpg"
                            alt="Become ARS"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/become-ars-logo.png"
                            alt="Become ARS Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            JOIN THE JOURNEY
                        </span>

                        <h3>
                            Become ARS
                        </h3>

                        <p>
                            Join the journey of building a new
                            generation of automotive intelligence.
                        </p>

                        <span class="ars-card-action">
                            Become ARS →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 13 — ARS FUTURE LAB                              -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-future-lab.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Future Lab"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-future-lab.jpg"
                            alt="ARS Future Lab"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-future-lab-logo.png"
                            alt="ARS Future Lab Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            FUTURE TECHNOLOGY
                        </span>

                        <h3>
                            ARS Future Lab
                        </h3>

                        <p>
                            Exploring emerging technologies
                            shaping the future of mobility.
                        </p>

                        <span class="ars-card-action">
                            Explore Future Lab →
                        </span>

                    </div>

                </a>

            </article>


            <!-- ================================================= -->
            <!-- 14 — ARS HERITAGE GROUP                          -->
            <!-- ================================================= -->

            <article class="ars-glass-card ars-specialized-card">

                <a
                    href="ars-heritage-group.html"
                    class="ars-card-link"
                    aria-label="Explore ARS Heritage Group"
                >

                    <div class="ars-card-image">

                        <img
                            src="images/ecosystem/ars-heritage-group.jpg"
                            alt="ARS Heritage Group"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-logo">

                        <img
                            src="images/logos/ars-heritage-group-logo.png"
                            alt="ARS Heritage Group Logo"
                            loading="lazy"
                        >

                    </div>


                    <div class="ars-card-content">

                        <span class="ars-card-category">
                            THE MOTHER ECOSYSTEM
                        </span>

                        <h3>
                            ARS Heritage Group
                        </h3>

                        <p>
                            The central vision connecting every
                            ARS division, technology and future.
                        </p>

                        <span class="ars-card-action">
                            Explore ARS Heritage Group →
                        </span>

                    </div>

                </a>

            </article>


        </div>

    </div>

</section>




/* ========================================================= */
/* ========================================================= */
/*                                                             */
/*  STEP 02-A                                                 */
/*  ARS HOME PREMIUM 3D GLASS CARD SYSTEM                     */
/*  BASE STRUCTURE — 14 CARDS                                 */
/*                                                             */
/*  04 CORE MANAGEMENT CARDS                                  */
/*  10 SPECIALIZED CARDS                                      */
/*                                                             */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — HOME ECOSYSTEM SECTION                                */
/* ========================================================= */

.ars-home-ecosystem{

    position:relative;

    width:100%;

    padding:

        140px
        0
        180px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(208,170,99,.16),
            transparent 38%
        ),

        radial-gradient(
            circle at 15% 50%,
            rgba(12,29,48,.28),
            transparent 45%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(155,103,48,.12),
            transparent 42%
        );

}


/* ========================================================= */
/* 02 — ECOSYSTEM CONTAINER                                  */
/* ========================================================= */

.ars-home-ecosystem .container{

    position:relative;

    width:

        min(92%, 1700px);

    margin:

        0 auto;

    z-index:5;

}


/* ========================================================= */
/* 03 — SECTION HEADER                                       */
/* ========================================================= */

.ecosystem-header{

    position:relative;

    max-width:

        900px;

    margin:

        0 auto
        90px;

    text-align:center;

}


.ecosystem-header .section-label{

    display:inline-block;

    margin-bottom:20px;

    color:

        rgba(225,194,135,.95);

    font-size:

        .78rem;

    font-weight:

        600;

    letter-spacing:

        .28em;

    text-transform:

        uppercase;

}


.ecosystem-header h2{

    margin:

        0
        0
        24px;

    color:

        #f3e5c4;

    font-size:

        clamp(
            2.4rem,
            4vw,
            5rem
        );

    line-height:

        1.05;

    font-weight:

        600;

    letter-spacing:

        -.025em;

    text-shadow:

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

        0
        0
        35px
        rgba(208,170,99,.12);

}


.ecosystem-header p{

    max-width:

        720px;

    margin:

        0 auto;

    color:

        rgba(225,225,225,.68);

    font-size:

        1rem;

    line-height:

        1.9;

}


/* ========================================================= */
/* 04 — CORE DIVISION GRID                                   */
/*                                                             */
/* 04 MAIN CARDS — ONE ROW                                   */
/* ========================================================= */

.ars-core-grid{

    display:grid;

    grid-template-columns:

        repeat(4, minmax(0,1fr));

    gap:

        28px;

    margin-bottom:

        34px;

}


/* ========================================================= */
/* 05 — SPECIALIZED GRID                                     */
/*                                                             */
/* 10 CARDS — TWO COLUMNS                                    */
/*                                                             */
/* 5 ROWS × 2 CARDS                                           */
/* ========================================================= */

.ars-specialized-grid{

    display:grid;

    grid-template-columns:

        repeat(2, minmax(0,1fr));

    gap:

        30px;

}


/* ========================================================= */
/* 06 — UNIVERSAL GLASS CARD                                 */
/* ========================================================= */

.ars-glass-card{

    position:relative;

    min-width:0;

    isolation:isolate;

    border-radius:

        28px;

    overflow:hidden;

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.16),

            rgba(255,255,255,.075)
            38%,

            rgba(208,170,99,.055)
            70%,

            rgba(7,22,38,.42)
        );

    border:

        1px solid
        rgba(232,204,153,.24);

    box-shadow:

        0
        15px
        35px
        rgba(0,0,0,.38),

        0
        30px
        70px
        rgba(0,0,0,.24),

        0
        0
        35px
        rgba(208,170,99,.06),

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

        inset
        0
        0
        35px
        rgba(255,255,255,.025);

    backdrop-filter:

        blur(22px)
        saturate(135%);

    -webkit-backdrop-filter:

        blur(22px)
        saturate(135%);

    transform-style:

        preserve-3d;

    transition:

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

        box-shadow
        .65s
        ease,

        border-color
        .5s
        ease;

}


/* ========================================================= */
/* 07 — GLASS CARD INTERNAL LIGHT                            */
/* ========================================================= */

.ars-glass-card::before{

    content:"";

    position:absolute;

    inset:

        1px;

    z-index:-1;

    border-radius:

        27px;

    pointer-events:none;

    background:

        linear-gradient(
            125deg,

            rgba(255,255,255,.12),

            transparent 30%,

            transparent 65%,

            rgba(208,170,99,.08)
        );

    opacity:

        .75;

}


/* ========================================================= */
/* 08 — GLASS CARD TOP REFLECTION                             */
/* ========================================================= */

.ars-glass-card::after{

    content:"";

    position:absolute;

    top:

        -40%;

    left:

        -25%;

    width:

        150%;

    height:

        70%;

    pointer-events:none;

    background:

        linear-gradient(
            120deg,

            transparent
            35%,

            rgba(255,255,255,.075)
            48%,

            rgba(255,214,140,.055)
            51%,

            transparent
            65%
        );

    transform:

        rotate(-8deg);

    opacity:

        .65;

}


/* ========================================================= */
/* 09 — CARD LINK                                           */
/* ========================================================= */

.ars-card-link{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    min-height:

        520px;

    color:

        inherit;

    text-decoration:none;

    transform-style:

        preserve-3d;

}


/* ========================================================= */
/* 10 — CARD IMAGE AREA                                      */
/* ========================================================= */

.ars-card-image{

    position:relative;

    width:100%;

    height:

        280px;

    overflow:hidden;

    background:

        rgba(4,15,28,.5);

    transform:

        translateZ(20px);

}


.ars-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to bottom,

            transparent
            35%,

            rgba(5,17,30,.18)
            60%,

            rgba(5,17,30,.82)
            100%
        );

}


.ars-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    opacity:

        .82;

    filter:

        saturate(92%)
        contrast(105%);

    transition:

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

        filter
        .8s
        ease,

        opacity
        .8s
        ease;

}


/* ========================================================= */
/* 11 — CARD LOGO                                            */
/* ========================================================= */

.ars-card-logo{

    position:absolute;

    top:

        235px;

    left:

        28px;

    width:

        100px;

    height:

        100px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:10;

    border-radius:

        24px;

    background:

        linear-gradient(
            145deg,

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

            rgba(255,255,255,.055)
        );

    border:

        1px solid
        rgba(255,225,165,.25);

    box-shadow:

        0
        12px
        30px
        rgba(0,0,0,.42),

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

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

    backdrop-filter:

        blur(14px);

    -webkit-backdrop-filter:

        blur(14px);

    transform:

        translateZ(45px);

}


.ars-card-logo img{

    width:

        72%;

    height:

        72%;

    object-fit:contain;

    filter:

        drop-shadow(
            0
            0
            12px
            rgba(255,205,120,.28)
        );

}


/* ========================================================= */
/* 12 — CARD CONTENT                                         */
/* ========================================================= */

.ars-card-content{

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

    padding:

        70px
        30px
        30px;

    transform:

        translateZ(35px);

}


.ars-card-category{

    margin-bottom:

        12px;

    color:

        rgba(215,178,106,.9);

    font-size:

        .68rem;

    font-weight:

        600;

    letter-spacing:

        .2em;

    text-transform:

        uppercase;

}


.ars-card-content h3{

    margin:

        0
        0
        14px;

    color:

        #f3e6c9;

    font-size:

        1.65rem;

    line-height:

        1.15;

    font-weight:

        600;

    letter-spacing:

        -.015em;

}


.ars-card-content p{

    margin:

        0;

    color:

        rgba(225,225,225,.68);

    font-size:

        .92rem;

    line-height:

        1.75;

}


.ars-card-action{

    margin-top:

        auto;

    padding-top:

        25px;

    color:

        rgba(230,198,133,.92);

    font-size:

        .78rem;

    font-weight:

        600;

    letter-spacing:

        .08em;

    transition:

        color
        .4s
        ease,

        transform
        .4s
        ease;

}


/* ========================================================= */
/* 13 — CORE CARD DIFFERENTIATION                             */
/* ========================================================= */

.ars-core-card{

    min-height:

        580px;

}


.ars-core-card .ars-card-image{

    height:

        320px;

}


.ars-core-card .ars-card-logo{

    top:

        275px;

    width:

        110px;

    height:

        110px;

}


.ars-core-card .ars-card-content{

    padding-top:

        78px;

}


/* ========================================================= */
/* 14 — SPECIALIZED CARD DIFFERENTIATION                      */
/* ========================================================= */

.ars-specialized-card{

    min-height:

        480px;

}


.ars-specialized-card .ars-card-link{

    min-height:

        480px;

}


/* ========================================================= */
/* 15 — BASIC HOVER STATE                                    */
/* ========================================================= */

.ars-glass-card:hover{

    border-color:

        rgba(238,207,150,.48);

    box-shadow:

        0
        20px
        45px
        rgba(0,0,0,.48),

        0
        40px
        100px
        rgba(0,0,0,.34),

        0
        0
        55px
        rgba(208,170,99,.16),

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

}


.ars-glass-card:hover .ars-card-image img{

    transform:

        scale(1.08);

    filter:

        saturate(110%)
        contrast(108%);

    opacity:

        .96;

}


.ars-glass-card:hover .ars-card-action{

    color:

        #f2d18c;

    transform:

        translateX(5px);

}


/* ========================================================= */
/* 16 — DESKTOP CORE CARD HEIGHT                              */
/* ========================================================= */

@media (min-width:1200px){

    .ars-core-card{

        min-height:

            620px;

    }

}


/* ========================================================= */
/* 17 — TABLET                                               */
/* ========================================================= */

@media (max-width:1100px){

    .ars-core-grid{

        grid-template-columns:

            repeat(2, minmax(0,1fr));

    }

    .ars-specialized-grid{

        grid-template-columns:

            repeat(2, minmax(0,1fr));

    }

}


/* ========================================================= */
/* 18 — MOBILE                                               */
/* ========================================================= */

@media (max-width:768px){

    .ars-home-ecosystem{

        padding:

            100px
            0
            120px;

    }


    .ars-core-grid{

        grid-template-columns:

            1fr;

        gap:

            24px;

    }


    .ars-specialized-grid{

        grid-template-columns:

            1fr;

        gap:

            24px;

    }


    .ars-card-link{

        min-height:

            500px;

    }


    .ars-core-card{

        min-height:

            540px;

    }


    .ars-core-card .ars-card-image{

        height:

            280px;

    }


    .ars-core-card .ars-card-logo{

        top:

            235px;

    }

}


/* ========================================================= */
/* 19 — SMALL MOBILE                                         */
/* ========================================================= */

@media (max-width:520px){

    .ars-home-ecosystem{

        padding:

            80px
            0
            100px;

    }


    .ars-home-ecosystem .container{

        width:

            90%;

    }


    .ars-card-image{

        height:

            240px;

    }


    .ars-card-logo{

        top:

            195px;

        left:

            22px;

        width:

            88px;

        height:

            88px;

    }


    .ars-card-content{

        padding:

            65px
            24px
            25px;

    }


    .ars-core-card .ars-card-image{

        height:

            260px;

    }


    .ars-core-card .ars-card-logo{

        top:

            215px;

    }

}


/* ========================================================= */
/* 20 — ACCESSIBILITY                                        */
/* ========================================================= */

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

    .ars-glass-card,
    .ars-card-image img,
    .ars-card-action{

        transition:none;

    }

}


/* ========================================================= */
/* ========================================================= */
/*                                                             */
/*  STEP 02-B                                                 */
/*  ARS HOME EXTREME 3D GLASS CARD SYSTEM                     */
/*  DEEP 3D / GOLD LIGHT / DEEP SHADOW / PREMIUM DEPTH        */
/*                                                             */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — EXTREME CARD DEPTH                                    */
/* ========================================================= */

.ars-glass-card{

    transform-style:
        preserve-3d;

    perspective:
        1400px;

    will-change:
        transform,
        box-shadow;

}


/* ========================================================= */
/* 02 — DEEP CARD SHADOW                                      */
/* ========================================================= */

.ars-glass-card{

    box-shadow:

        0
        18px
        35px
        rgba(0,0,0,.42),

        0
        35px
        75px
        rgba(0,0,0,.34),

        0
        60px
        120px
        rgba(0,0,0,.22),

        0
        0
        40px
        rgba(184,137,63,.10),

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

        inset
        0
        -25px
        45px
        rgba(4,16,30,.20);

}


/* ========================================================= */
/* 03 — GOLDEN EDGE LIGHT                                     */
/* ========================================================= */

.ars-glass-card::before{

    background:

        linear-gradient(
            135deg,

            rgba(255,255,255,.18)
            0%,

            rgba(255,255,255,.05)
            18%,

            transparent
            38%,

            transparent
            60%,

            rgba(215,170,90,.08)
            82%,

            rgba(255,215,140,.14)
            100%
        );

}


/* ========================================================= */
/* 04 — CARD TOP GLASS REFLECTION                             */
/* ========================================================= */

.ars-glass-card::after{

    background:

        linear-gradient(
            115deg,

            transparent
            20%,

            rgba(255,255,255,.025)
            38%,

            rgba(255,255,255,.13)
            48%,

            rgba(255,218,150,.12)
            51%,

            rgba(255,255,255,.025)
            56%,

            transparent
            72%
        );

    opacity:

        .8;

    transition:

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

        opacity
        .7s
        ease;

}


/* ========================================================= */
/* 05 — EXTREME HOVER LIFT                                   */
/* ========================================================= */

.ars-glass-card:hover{

    transform:

        translateY(-18px)
        translateZ(35px)
        rotateX(1deg);

    border-color:

        rgba(245,211,145,.62);

    box-shadow:

        0
        25px
        50px
        rgba(0,0,0,.50),

        0
        50px
        110px
        rgba(0,0,0,.38),

        0
        0
        65px
        rgba(184,137,63,.24),

        0
        0
        110px
        rgba(184,137,63,.08),

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

        inset
        0
        0
        40px
        rgba(255,210,130,.035);

}


/* ========================================================= */
/* 06 — GLASS REFLECTION MOVEMENT                             */
/* ========================================================= */

.ars-glass-card:hover::after{

    transform:

        translateX(18%)
        rotate(-8deg);

    opacity:

        1;

}


/* ========================================================= */
/* 07 — IMAGE 3D DEPTH                                       */
/* ========================================================= */

.ars-card-image{

    transform:

        translateZ(22px);

    transform-style:

        preserve-3d;

}


.ars-card-image img{

    transform:

        translateZ(5px)
        scale(1.01);

}


/* ========================================================= */
/* 08 — IMAGE HOVER DEPTH                                     */
/* ========================================================= */

.ars-glass-card:hover
.ars-card-image img{

    transform:

        translateZ(18px)
        scale(1.10);

    filter:

        saturate(115%)
        contrast(110%)
        brightness(1.04);

}


/* ========================================================= */
/* 09 — LOGO EXTREME 3D                                      */
/* ========================================================= */

.ars-card-logo{

    transform:

        translateZ(65px);

    box-shadow:

        0
        15px
        35px
        rgba(0,0,0,.48),

        0
        0
        30px
        rgba(184,137,63,.16),

        0
        0
        55px
        rgba(184,137,63,.07),

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

        inset
        0
        0
        22px
        rgba(255,255,255,.035);

}


/* ========================================================= */
/* 10 — LOGO HOVER LIFT                                      */
/* ========================================================= */

.ars-glass-card:hover
.ars-card-logo{

    transform:

        translateZ(90px)
        scale(1.07);

    border-color:

        rgba(245,211,145,.58);

    box-shadow:

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

        0
        0
        40px
        rgba(210,164,82,.30),

        0
        0
        80px
        rgba(210,164,82,.12),

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

}


/* ========================================================= */
/* 11 — LOGO GOLD LIGHT                                      */
/* ========================================================= */

.ars-card-logo img{

    filter:

        drop-shadow(
            0
            0
            12px
            rgba(255,205,120,.30)
        )

        drop-shadow(
            0
            0
            25px
            rgba(184,137,63,.12)
        );

}


.ars-glass-card:hover
.ars-card-logo img{

    filter:

        drop-shadow(
            0
            0
            16px
            rgba(255,220,150,.70)
        )

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

}


/* ========================================================= */
/* 12 — CONTENT 3D LAYER                                     */
/* ========================================================= */

.ars-card-content{

    transform:

        translateZ(42px);

    transform-style:

        preserve-3d;

}


/* ========================================================= */
/* 13 — TITLE DEPTH                                          */
/* ========================================================= */

.ars-card-content h3{

    text-shadow:

        0
        3px
        8px
        rgba(0,0,0,.55),

        0
        0
        25px
        rgba(218,174,94,.08);

    transform:

        translateZ(12px);

}


/* ========================================================= */
/* 14 — GOLD CATEGORY                                        */
/* ========================================================= */

.ars-card-category{

    color:

        rgba(232,191,112,.96);

    text-shadow:

        0
        0
        18px
        rgba(210,164,82,.18);

}


/* ========================================================= */
/* 15 — ACTION GOLD                                         */
/* ========================================================= */

.ars-card-action{

    color:

        #e7c27c;

    text-shadow:

        0
        0
        18px
        rgba(210,164,82,.16);

}


.ars-glass-card:hover
.ars-card-action{

    color:

        #ffe0a0;

    text-shadow:

        0
        0
        25px
        rgba(255,205,120,.40);

}


/* ========================================================= */
/* 16 — CORE CARDS — EXTRA PREMIUM DEPTH                      */
/* ========================================================= */

.ars-core-card{

    box-shadow:

        0
        20px
        45px
        rgba(0,0,0,.48),

        0
        45px
        100px
        rgba(0,0,0,.35),

        0
        0
        50px
        rgba(184,137,63,.14),

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

        inset
        0
        0
        50px
        rgba(184,137,63,.035);

}


/* ========================================================= */
/* 17 — CORE CARD HOVER                                      */
/* ========================================================= */

.ars-core-card:hover{

    transform:

        translateY(-24px)
        translateZ(45px)
        rotateX(1.5deg);

    box-shadow:

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

        0
        60px
        130px
        rgba(0,0,0,.42),

        0
        0
        75px
        rgba(184,137,63,.28),

        0
        0
        130px
        rgba(184,137,63,.10),

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

}


/* ========================================================= */
/* 18 — SPECIALIZED CARDS — GLASSIER                         */
/* ========================================================= */

.ars-specialized-card{

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.17),

            rgba(255,255,255,.065)
            35%,

            rgba(10,29,48,.30)
            65%,

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

    backdrop-filter:

        blur(28px)
        saturate(145%);

    -webkit-backdrop-filter:

        blur(28px)
        saturate(145%);

}


/* ========================================================= */
/* 19 — SPECIALIZED HOVER                                    */
/* ========================================================= */

.ars-specialized-card:hover{

    box-shadow:

        0
        25px
        55px
        rgba(0,0,0,.50),

        0
        55px
        115px
        rgba(0,0,0,.36),

        0
        0
        60px
        rgba(184,137,63,.20),

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

}


/* ========================================================= */
/* 20 — PREMIUM GOLD EDGE                                    */
/* ========================================================= */

.ars-core-card,
.ars-specialized-card{

    position:relative;

}


.ars-core-card::before,
.ars-specialized-card::before{

    content:"";

    position:absolute;

    inset:

        0;

    z-index:

        2;

    pointer-events:

        none;

    border-radius:

        inherit;

    border:

        1px
        solid
        transparent;

    background:

        linear-gradient(
            135deg,

            rgba(255,255,255,.20),

            transparent 25%,

            transparent 70%,

            rgba(220,177,95,.18)
        )
        border-box;

    mask:

        linear-gradient(#000 0 0)
        padding-box,

        linear-gradient(#000 0 0);

    mask-composite:

        exclude;

    -webkit-mask:

        linear-gradient(#000 0 0)
        padding-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:

        xor;

}


/* ========================================================= */
/* 21 — GOLDEN AMBIENT GLOW                                  */
/* ========================================================= */

.ars-core-grid,
.ars-specialized-grid{

    position:relative;

}


.ars-core-grid::before,
.ars-specialized-grid::before{

    content:"";

    position:absolute;

    top:

        35%;

    left:

        50%;

    width:

        70%;

    height:

        60%;

    transform:

        translate(
            -50%,
            -50%
        );

    pointer-events:

        none;

    background:

        radial-gradient(
            ellipse,

            rgba(184,137,63,.10),

            transparent
            65%
        );

    filter:

        blur(45px);

    z-index:

        -1;

}


/* ========================================================= */
/* 22 — PREMIUM CARD SELECTED STATE                          */
/* ========================================================= */

.ars-glass-card.is-selected{

    transform:

        translateY(-22px)
        translateZ(55px)
        scale(1.025);

    border-color:

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

    box-shadow:

        0
        30px
        65px
        rgba(0,0,0,.58),

        0
        65px
        140px
        rgba(0,0,0,.40),

        0
        0
        80px
        rgba(218,174,94,.32),

        0
        0
        150px
        rgba(218,174,94,.12),

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

        inset
        0
        0
        50px
        rgba(255,210,130,.055);

}


/* ========================================================= */
/* 23 — SELECTED CARD IMAGE                                  */
/* ========================================================= */

.ars-glass-card.is-selected
.ars-card-image img{

    transform:

        scale(1.10);

    filter:

        saturate(120%)
        contrast(112%)
        brightness(1.06);

}


/* ========================================================= */
/* 24 — SELECTED CARD LOGO                                   */
/* ========================================================= */

.ars-glass-card.is-selected
.ars-card-logo{

    transform:

        translateZ(100px)
        scale(1.08);

    border-color:

        rgba(255,220,150,.80);

    box-shadow:

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

        0
        0
        45px
        rgba(255,210,120,.38),

        0
        0
        100px
        rgba(184,137,63,.18),

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

}


/* ========================================================= */
/* 25 — SELECTED GOLD LIGHT                                  */
/* ========================================================= */

.ars-glass-card.is-selected
.ars-card-logo img{

    filter:

        drop-shadow(
            0
            0
            22px
            rgba(255,225,160,.90)
        )

        drop-shadow(
            0
            0
            45px
            rgba(210,164,82,.42)
        );

}


/* ========================================================= */
/* 26 — MOBILE 3D SAFETY                                     */
/* ========================================================= */

@media (max-width:768px){

    .ars-glass-card:hover{

        transform:

            translateY(-10px)
            translateZ(15px);

    }


    .ars-core-card:hover{

        transform:

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

    }


    .ars-glass-card.is-selected{

        transform:

            translateY(-12px)
            translateZ(20px)
            scale(1.015);

    }

}


/* ========================================================= */
/* 27 — REDUCED MOTION                                       */
/* ========================================================= */

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

    .ars-glass-card,
    .ars-glass-card::after,
    .ars-card-image img,
    .ars-card-logo{

        transition:none;

        transform:none;

    }

}



/* ========================================================= */
/* ========================================================= */
/*                                                             */
/*  ARS HOME — PREMIUM GOLDEN INTERACTION OVERRIDE             */
/*                                                             */
/*  ADDITIVE EFFECTS ONLY                                      */
/*  EXISTING CARD DESIGN REMAINS UNCHANGED                     */
/*                                                             */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — DEEP GOLD LOWER REFLECTION                             */
/*                                                             */
/*  فقط نیمه پایین کارت طلایی‌تر می‌شود                       */
/*  سورمه‌ای بالای کارت دست‌نخورده باقی می‌ماند                */
/* ========================================================= */

.ars-glass-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}


.ars-glass-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:62%;

    pointer-events:none;

    z-index:2;

    background:

        linear-gradient(
            180deg,

            rgba(184,137,63,0)
            0%,

            rgba(184,137,63,.05)
            18%,

            rgba(184,137,63,.16)
            38%,

            rgba(184,137,63,.34)
            58%,

            rgba(205,157,72,.55)
            76%,

            rgba(230,188,103,.72)
            100%
        );

    opacity:.95;

    mix-blend-mode:

        screen;

}


/* ========================================================= */
/* 02 — GOLDEN GLASS REFLECTION                               */
/* ========================================================= */

.ars-glass-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.08)
            0%,

            transparent 28%,

            transparent 48%,

            rgba(184,137,63,.05)
            62%,

            rgba(230,188,103,.20)
            100%
        );

    opacity:.75;

}


/* ========================================================= */
/* 03 — KEEP CARD CONTENT ABOVE EFFECTS                       */
/* ========================================================= */

.ars-glass-card > *,
.ars-card-link{

    position:relative;

    z-index:5;

}


/* ========================================================= */
/* 04 — MAXIMUM GOLDEN DEPTH                                 */
/*                                                             */
/*  نور طلایی زیر کارت                                       */
/* ========================================================= */

.ars-glass-card{

    transition:

        transform
        1.1s
        cubic-bezier(.16,1,.3,1),

        box-shadow
        1s
        cubic-bezier(.16,1,.3,1);

}


/* ========================================================= */
/* 05 — EXTREME HOVER LIFT                                    */
/*                                                             */
/*  کارت هنگام انتخاب به سمت کاربر می‌آید                     */
/* ========================================================= */

.ars-glass-card:hover{

    transform:

        translateY(-28px)
        translateZ(80px)
        scale(1.035);

    box-shadow:

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

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

        0
        0
        100px
        rgba(220,174,91,.35),

        0
        0
        180px
        rgba(184,137,63,.18),

        inset
        0
        -60px
        100px
        rgba(230,188,103,.30);

}


/* ========================================================= */
/* 06 — MAXIMUM GOLDEN AURA                                  */
/*                                                             */
/*  تابش شدید اطراف کارت هنگام انتخاب                        */
/* ========================================================= */

.ars-glass-card:hover::after{

    background:

        linear-gradient(
            180deg,

            rgba(184,137,63,0)
            0%,

            rgba(184,137,63,.08)
            20%,

            rgba(205,157,72,.28)
            45%,

            rgba(230,188,103,.55)
            72%,

            rgba(255,215,135,.80)
            100%
        );

    opacity:

        1;

}


/* ========================================================= */
/* 07 — GOLDEN LIGHT BURST                                    */
/* ========================================================= */

.ars-glass-card:hover::before{

    background:

        radial-gradient(
            ellipse at 50% 100%,

            rgba(255,211,132,.48)
            0%,

            rgba(230,188,103,.28)
            25%,

            rgba(184,137,63,.12)
            48%,

            transparent
            75%
        );

    opacity:

        1;

}


/* ========================================================= */
/* 08 — CARD CONTENT RISE                                     */
/*                                                             */
/*  محتوا کمی جلوتر از بدنه کارت قرار می‌گیرد                 */
/* ========================================================= */

.ars-glass-card:hover .ars-card-logo{

    transform:

        translateZ(45px);

}


.ars-glass-card:hover .ars-card-content{

    transform:

        translateZ(35px);

}


/* ========================================================= */
/* 09 — GOLDEN LIGHT UNDER CARD                               */
/* ========================================================= */

.ars-glass-card:hover{

    filter:

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

}


/* ========================================================= */
/* 10 — SLOW PREMIUM TRANSITION                               */
/* ========================================================= */

.ars-card-logo,
.ars-card-content{

    transition:

        transform
        1s
        cubic-bezier(.16,1,.3,1);

}


/* ========================================================= */
/* 11 — SCROLL GOLDEN LIGHT FIELD                             */
/*                                                             */
/*  یک لایه نور برای بخش کارت‌ها                              */
/*  با حرکت نرم در هنگام اسکرول                               */
/* ========================================================= */

.ecosystem{

    position:relative;

}


.ecosystem::before{

    content:"";

    position:absolute;

    left:-20%;

    top:20%;

    width:140%;

    height:60%;

    pointer-events:none;

    z-index:0;

    background:

        radial-gradient(
            ellipse at 50% 50%,

            rgba(184,137,63,.12)
            0%,

            rgba(184,137,63,.06)
            30%,

            transparent
            70%
        );

    opacity:.65;

    animation:

        arsGoldenAtmosphere
        12s
        ease-in-out
        infinite alternate;

}


/* ========================================================= */
/* 12 — GOLDEN ATMOSPHERE MOTION                              */
/* ========================================================= */

@keyframes arsGoldenAtmosphere{

    0%{

        transform:

            translateX(-8%);

        opacity:

            .45;

    }

    100%{

        transform:

            translateX(8%);

        opacity:

            .85;

    }

}


/* ========================================================= */
/* 13 — REDUCED MOTION                                       */
/* ========================================================= */

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

    .ars-glass-card{

        transition:

            none;

    }


    .ars-glass-card:hover{

        transform:

            none;

    }


    .ecosystem::before{

        animation:

            none;

    }

}



/* ========================================================= */
/* ========================================================= */
/*                                                             */
/*  STEP 02-B — SCROLL ACTIVE CARD EFFECT                     */
/*                                                             */
/*  ADDITIVE OVERRIDE                                         */
/*  EXISTING CARD DESIGN REMAINS UNCHANGED                    */
/*                                                             */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — ACTIVE CARD                                           */
/* ========================================================= */

.ars-glass-card.ars-card-active{

    transform:

        translateY(-24px)
        translateZ(70px)
        scale(1.025);

    box-shadow:

        0
        32px
        65px
        rgba(0,0,0,.55),

        0
        0
        55px
        rgba(184,137,63,.45),

        0
        0
        120px
        rgba(220,174,91,.32),

        inset
        0
        -70px
        110px
        rgba(230,188,103,.30);

    transition:

        transform
        1.1s
        cubic-bezier(.16,1,.3,1),

        box-shadow
        1.1s
        cubic-bezier(.16,1,.3,1);

}


/* ========================================================= */
/* 02 — ACTIVE GOLDEN AURA                                   */
/* ========================================================= */

.ars-glass-card.ars-card-active::after{

    opacity:

        1;

    background:

        linear-gradient(
            180deg,

            rgba(184,137,63,0)
            0%,

            rgba(184,137,63,.08)
            20%,

            rgba(205,157,72,.24)
            42%,

            rgba(230,188,103,.52)
            72%,

            rgba(255,215,135,.78)
            100%
        );

}


/* ========================================================= */
/* 03 — ACTIVE GOLDEN LIGHT                                  */
/* ========================================================= */

.ars-glass-card.ars-card-active::before{

    opacity:

        1;

    background:

        radial-gradient(
            ellipse at 50% 100%,

            rgba(255,215,135,.48)
            0%,

            rgba(230,188,103,.30)
            25%,

            rgba(184,137,63,.12)
            48%,

            transparent
            76%
        );

}


/* ========================================================= */
/* 04 — ACTIVE CARD CONTENT DEPTH                             */
/* ========================================================= */

.ars-glass-card.ars-card-active .ars-card-logo{

    transform:

        translateZ(42px);

}


.ars-glass-card.ars-card-active .ars-card-content{

    transform:

        translateZ(32px);

}


/* ========================================================= */
/* 05 — SMOOTH CARD TRANSITION                                */
/* ========================================================= */

.ars-glass-card{

    transition:

        transform
        1.1s
        cubic-bezier(.16,1,.3,1),

        box-shadow
        1.1s
        cubic-bezier(.16,1,.3,1),

        filter
        1.1s
        ease;

}


/* ========================================================= */
/* 06 — ACTIVE GOLDEN LIGHT                                   */
/* ========================================================= */

.ars-glass-card.ars-card-active{

    filter:

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

}


/* ========================================================= */
/* 07 — MOBILE ACTIVE CARD                                    */
/* ========================================================= */

@media (max-width:768px){

    .ars-glass-card.ars-card-active{

        transform:

            translateY(-16px)
            translateZ(40px)
            scale(1.015);

    }

}


/* ========================================================= */
/* 08 — REDUCED MOTION                                        */
/* ========================================================= */

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

    .ars-glass-card,
    .ars-glass-card.ars-card-active{

        transition:

            none;

        transform:

            none;

    }

}