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


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

:root{

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

    --ars-black:
        #000000;

    --ars-black-deep:
        #010101;

    --ars-black-surface:
        #030405;


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

    --ars-navy-deep:
        #020712;

    --ars-navy:
        #06101f;

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


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

    --ars-gold:
        #c49a4a;

    --ars-gold-light:
        #e6c77a;

    --ars-gold-bright:
        #f3d995;

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


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

    --ars-bronze:
        #8f6238;

    --ars-bronze-light:
        #b4875a;

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


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

    --ars-white:
        #ffffff;

    --ars-white-soft:
        #f4f1e8;

    --ars-white-muted:
        #c8c6bf;


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

    --ars-blue:
        #174b82;

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

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


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

    --ars-red:
        #7d2024;

    --ars-red-light:
        #bd4b4f;

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


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

    --ars-yellow:
        #d7ad3f;

    --ars-yellow-light:
        #f1d36e;

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


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

    --ars-brown:
        #4a3020;

    --ars-brown-light:
        #806047;


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

    --ars-text:
        #f4f1e8;

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

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


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

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

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

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


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

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

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

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

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


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

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

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

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

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

}


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

html{

    width:100%;

    min-height:100%;

    margin:0;

    padding:0;

    background:
        #000000;

    overflow-x:hidden;

    scroll-behavior:smooth;

}


body{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:
        #000000;

    color:
        var(--ars-text);

    overflow-x:hidden;

    font-family:

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

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


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

    box-sizing:
        border-box;

}


img,
video,
svg,
canvas{

    display:
        block;

    max-width:
        100%;

}


a{

    color:
        inherit;

    text-decoration:
        none;

}


button,
a{

    -webkit-tap-highlight-color:
        transparent;

}


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

body{

    position:
        relative;

    background:

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

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

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

        #000000;

}


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

body::before{

    content:"";

    position:
        fixed;

    inset:
        -35%;

    z-index:
        0;

    pointer-events:
        none;

    background:

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

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

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

    animation:

        arsGlobalAtmosphere
        22s
        ease-in-out
        infinite
        alternate;

}


@keyframes arsGlobalAtmosphere{

    0%{

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

        opacity:
            .55;

    }

    50%{

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

        opacity:
            .85;

    }

    100%{

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

        opacity:
            .65;

    }

}


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

section,
header,
footer,
main,
nav{

    position:
        relative;

    max-width:
        100%;

}


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

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        100%;

    overflow:
        hidden;

}


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

.container{

    width:
        min(1400px, 90%);

    max-width:
        100%;

    margin-left:
        auto;

    margin-right:
        auto;

    position:
        relative;

    z-index:
        2;

}


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

section{

    width:
        100%;

    padding:

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

    isolation:
        isolate;

}


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

.section-header{

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    max-width:
        1000px;

    margin:

        0
        auto
        70px;

    text-align:
        center;

}


.section-label{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    padding:

        8px
        18px;

    border:

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

    border-radius:
        999px;

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

    background:

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

    backdrop-filter:
        blur(14px);

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

    box-shadow:

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

    font-size:
        .70rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.section-header h2{

    margin:
        0;

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

    font-size:

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

    line-height:
        1.12;

    letter-spacing:
        -.025em;

}


.section-header p{

    max-width:
        780px;

    margin:

        25px
        auto
        0;

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

    line-height:
        1.9;

}


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

.ars-glass{

    position:
        relative;

    overflow:
        hidden;

    border:

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

    background:

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

    backdrop-filter:

        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(24px)
        saturate(125%);

    box-shadow:

        var(--ars-shadow-black),

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

    transition:

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

        border-color .5s ease,

        box-shadow .5s ease,

        background .5s ease;

}


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

.ars-glass::before{

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

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

    transform:
        translateX(-120%);

    transition:
        transform 1.2s ease;

}


.ars-glass:hover::before{

    transform:
        translateX(120%);

}


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

.ars-glass:hover{

    transform:
        translateY(-10px);

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

    box-shadow:

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

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

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

}


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

.ars-glass-dark{

    background:

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

}


.ars-glass-navy{

    background:

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

    border-color:

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

}


.ars-glass-gold{

    background:

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

    border-color:

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

}


.ars-glass-bronze{

    background:

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

    border-color:

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

}


.ars-glass-blue{

    background:

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

    border-color:

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

}


.ars-glass-red{

    background:

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

    border-color:

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

}


.ars-glass-bright{

    background:

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

}


.ars-glass-flat{

    box-shadow:

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

}


.ars-glass-floating{

    box-shadow:

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

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

}


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

.gold-text{

    background:

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

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


h1,
h2,
h3,
h4{

    text-wrap:
        balance;

}


h1,
h2,
h3{

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

}


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

.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:

        0
        28px;

    border-radius:
        999px;

    font-size:
        .84rem;

    font-weight:
        600;

    letter-spacing:
        .04em;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease,

        border-color .4s ease;

}


.btn-primary{

    color:
        #090909;

    background:

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

    box-shadow:

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

}


.btn-secondary{

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

    border:

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

    background:

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

    backdrop-filter:
        blur(14px);

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

}


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

    transform:
        translateY(-4px);

    box-shadow:

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

}


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

.ars-scroll-line{

    position:
        fixed;

    right:
        24px;

    top:
        50%;

    width:
        2px;

    height:
        100px;

    transform:
        translateY(-50%);

    z-index:
        100;

    pointer-events:
        none;

    background:

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

    opacity:
        .65;

    animation:

        arsScrollGlow
        2.5s
        ease-in-out
        infinite;

}


@keyframes arsScrollGlow{

    0%,
    100%{

        opacity:
            .30;

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

    }

    50%{

        opacity:
            1;

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

    }

}


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

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

    outline:

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

    outline-offset:
        5px;

}


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

@media (max-width:1024px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            100px 0;

    }

}


@media (max-width:768px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            80px 0;

    }

    .section-header{

        margin-bottom:
            50px;

    }

    .section-header h2{

        font-size:

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

    }

    .btn-primary,
    .btn-secondary{

        width:
            100%;

    }

}


@media (max-width:480px){

    .container{

        width:
            92%;

    }

    section{

        padding:
            70px 0;

    }

    .section-label{

        font-size:
            .62rem;

        letter-spacing:
            .12em;

    }

}


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

@media (max-width:768px){

    html,
    body{

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;

    }

    .ars-glass{

        max-width:
            100%;

        min-width:
            0;

    }

}


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

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}

/* ========================================================= */
/* ========================================================= */
/*                 ARS — BECOME ARS                          */
/*            PREMIUM PAGE SPECIAL CSS                       */
/* ========================================================= */
/* ========================================================= */


/* ========================================================= */
/* 01 — PAGE ROOT                                            */
/* ========================================================= */

.become-ars-hero,
.ars-core-philosophy,
.ars-family-ecosystem,
.ways-become-ars,
.ars-owners-family,
.ars-team-family,
.ars-partners-investors,
.ars-open-door,
.founder-vision,
.become-final{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    background:
    radial-gradient(
        circle at 50% 0%,
        rgba(184,137,63,.10),
        transparent 32%
    ),
    #000;

}


/* ========================================================= */
/* 02 — PREMIUM SECTION ATMOSPHERE                            */
/* ========================================================= */

.become-ars-hero::before,
.ars-core-philosophy::before,
.ars-family-ecosystem::before,
.ways-become-ars::before,
.ars-owners-family::before,
.ars-team-family::before,
.ars-partners-investors::before,
.ars-open-door::before,
.founder-vision::before,
.become-final::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

    radial-gradient(
        circle at 15% 25%,
        rgba(22,42,82,.16),
        transparent 28%
    ),

    radial-gradient(
        circle at 85% 75%,
        rgba(184,137,63,.08),
        transparent 30%
    );

}


/* ========================================================= */
/* 03 — HERO                                                  */
/* ========================================================= */

.become-ars-hero{

    min-height:100svh;

    display:flex;

    align-items:center;

    padding:
    clamp(110px,12vw,180px)
    0
    clamp(80px,9vw,140px);

}


.become-ars-bg{

    position:absolute;

    inset:-10%;

    z-index:-4;

    background:

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

    radial-gradient(
        circle at 30% 60%,
        rgba(15,35,72,.30),
        transparent 35%
    ),

    #000;

    animation:
    becomeAtmosphere 16s ease-in-out infinite alternate;

}


@keyframes becomeAtmosphere{

    0%{
        transform:scale(1);
        filter:brightness(.8);
    }

    100%{
        transform:scale(1.08);
        filter:brightness(1.12);
    }

}


.become-ars-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.95),
        rgba(0,0,0,.70),
        rgba(0,0,0,.20)
    );

    z-index:-3;

}


.become-ars-wrapper{

    display:grid;

    grid-template-columns:
    minmax(0,1.05fr)
    minmax(360px,.95fr);

    align-items:center;

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

}


.become-ars-content{

    max-width:760px;

}


.become-ars-content h1{

    font-size:
    clamp(3rem,7vw,7rem);

    line-height:.94;

    letter-spacing:-.055em;

    margin:
    18px
    0
    28px;

    background:

    linear-gradient(
        120deg,
        #fff 0%,
        #f5f1e8 32%,
        #c99b52 62%,
        #fff 82%,
        #9b7134 100%
    );

    background-size:220% auto;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    animation:
    premiumGoldFlow 9s ease-in-out infinite;

}


@keyframes premiumGoldFlow{

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

    50%{
        background-position:100% center;
    }

}


.become-ars-content p{

    max-width:680px;

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

    line-height:1.9;

    font-size:1.04rem;

}


.become-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:38px;

}


/* ========================================================= */
/* 04 — HERO VISUAL                                           */
/* ========================================================= */

.become-ars-visual{

    position:relative;

    min-height:560px;

    border-radius:42px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.025) 45%,
        rgba(184,137,63,.08)
    );

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

    box-shadow:

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

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

}


.become-ars-visual::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,163,77,.25),
        transparent 65%
    );

    filter:blur(20px);

    animation:
    becomeOrb 8s ease-in-out infinite alternate;

}


@keyframes becomeOrb{

    from{
        transform:scale(.8);
        opacity:.5;
    }

    to{
        transform:scale(1.25);
        opacity:1;
    }

}


.become-ars-visual img{

    position:relative;

    z-index:2;

    width:88%;

    max-height:500px;

    object-fit:contain;

    filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.8));

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

}


.become-ars-visual:hover img{

    transform:
    scale(1.045)
    translateY(-8px);

}


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

.section-heading{

    max-width:850px;

    margin:
    0 auto 70px;

    text-align:center;

}


.section-heading h2{

    font-size:
    clamp(2.2rem,4.5vw,4.8rem);

    line-height:1;

    letter-spacing:-.045em;

    margin:
    16px 0
    22px;

}


.section-heading p{

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

    line-height:1.85;

}


/* ========================================================= */
/* 06 — PHILOSOPHY                                            */
/* ========================================================= */

.ars-core-philosophy{

    padding:
    clamp(100px,12vw,180px)
    0;

}


.philosophy-main{

    max-width:1050px;

    margin:auto;

    padding:
    clamp(40px,6vw,80px);

    text-align:center;

    border-radius:38px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.085),
        rgba(255,255,255,.025)
    );

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

    box-shadow:
    0 35px 90px rgba(0,0,0,.65),

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

}


.philosophy-icon{

    width:70px;

    height:70px;

    display:grid;

    place-items:center;

    margin:0 auto 25px;

    border-radius:50%;

    color:#d4a34d;

    font-size:1.7rem;

    background:
    radial-gradient(
        circle,
        rgba(212,163,77,.20),
        transparent 70%
    );

    box-shadow:
    0 0 50px rgba(212,163,77,.15);

}


.philosophy-main h2{

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

}


.philosophy-main p{

    max-width:760px;

    margin:
    18px auto;

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

    line-height:1.9;

}


.philosophy-cards{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}


.philosophy-card{

    min-height:280px;

    padding:35px 28px;

    border-radius:30px;

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

}


.philosophy-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(212,163,77,.45);

    box-shadow:
    0 25px 70px rgba(0,0,0,.6),

    0 0 35px rgba(212,163,77,.08);

}


.card-icon{

    font-size:2rem;

    margin-bottom:25px;

}


.philosophy-card h3{

    color:#fff;

}


.philosophy-card p{

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

    line-height:1.7;

}


.philosophy-quote{

    max-width:900px;

    margin:25px auto 0;

    padding:45px;

    border-radius:32px;

    text-align:center;

}


.philosophy-quote h2{

    font-size:
    clamp(1.5rem,3vw,2.8rem);

    line-height:1.3;

    color:#f2e7cf;

}


.philosophy-quote span{

    color:#c99b52;

    font-size:.8rem;

    letter-spacing:.2em;

    text-transform:uppercase;

}


/* ========================================================= */
/* 07 — FAMILY ECOSYSTEM                                      */
/* ========================================================= */

.ars-family-ecosystem{

    padding:
    120px 0;

}


.family-grid{

    display:grid;

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

    gap:20px;

}


.family-card{

    position:relative;

    min-height:330px;

    padding:38px;

    border-radius:32px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    transition:
    transform .5s ease,
    box-shadow .5s ease;

}


.family-card:nth-child(even){

    transform:
    translateY(28px);

}


.family-card:hover{

    transform:
    translateY(-8px);

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

}


.family-icon{

    font-size:2rem;

    margin-bottom:25px;

}


.family-card h3{

    font-size:1.5rem;

}


.family-card p{

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

    line-height:1.75;

}


.family-card a{

    margin-top:auto;

    color:#d4a34d;

    text-decoration:none;

    font-weight:600;

}


.family-banner{

    margin-top:90px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:40px;

    padding:55px;

    border-radius:40px;

    overflow:hidden;

}


.family-banner-content h2{

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

}


.family-banner-content p{

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

    line-height:1.8;

}


.family-banner-image img{

    width:100%;

    border-radius:28px;

    display:block;

}


/* ========================================================= */
/* 08 — WAYS TO BECOME                                        */
/* ========================================================= */

.ways-become-ars{

    padding:
    120px 0;

}


.ways-grid{

    display:grid;

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

    gap:20px;

}


.way-card{

    position:relative;

    min-height:360px;

    padding:38px;

    border-radius:34px;

    overflow:hidden;

    transition:
    transform .5s ease;

}


.way-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,163,77,.14),
        transparent 70%
    );

}


.way-card:hover{

    transform:
    translateY(-12px);

}


.way-number{

    position:absolute;

    top:28px;

    right:30px;

    color:rgba(212,163,77,.35);

    font-size:2.4rem;

    font-weight:700;

}


.way-icon{

    font-size:2rem;

    margin-bottom:30px;

}


.way-card h3{

    font-size:1.45rem;

}


.way-card p{

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

    line-height:1.75;

}


.way-card a{

    display:inline-block;

    margin-top:20px;

    color:#d4a34d;

    text-decoration:none;

}


.ars-journey-timeline{

    margin-top:80px;

    padding:55px;

    border-radius:38px;

}


.ars-journey-timeline h2{

    text-align:center;

    margin-bottom:50px;

}


.timeline-items{

    display:grid;

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

    position:relative;

}


.timeline-items::before{

    content:"";

    position:absolute;

    top:24px;

    left:10%;

    right:10%;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(212,163,77,.5),
        transparent
    );

}


.timeline-item{

    position:relative;

    text-align:center;

    z-index:2;

}


.timeline-item span{

    width:48px;

    height:48px;

    display:grid;

    place-items:center;

    margin:
    0 auto 25px;

    border-radius:50%;

    color:#000;

    background:
    linear-gradient(
        135deg,
        #f2d18b,
        #9b7134
    );

}


.timeline-item p{

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

}


/* ========================================================= */
/* 09 — OWNERS / TEAM / PARTNERS MAIN PANELS                  */
/* ========================================================= */

.owners-hero,
.team-hero,
.partners-main{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:50px;

    padding:60px;

    border-radius:42px;

}


.owners-content p,
.team-content p,
.partners-content p{

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

    line-height:1.85;

}


.owners-content a,
.team-content a,
.partners-content a{

    display:inline-block;

    margin-top:25px;

    color:#d4a34d;

    text-decoration:none;

}


.owners-image img,
.team-image img,
.partners-image img{

    width:100%;

    display:block;

    border-radius:28px;

}


.owner-cards,
.team-grid,
.partners-grid{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}


.owner-card,
.team-card,
.partner-family-card{

    min-height:260px;

    padding:32px;

    border-radius:30px;

    transition:
    transform .45s ease;

}


.owner-card:hover,
.team-card:hover,
.partner-family-card:hover{

    transform:
    translateY(-8px);

}


.owner-icon,
.team-icon,
.partner-icon{

    font-size:2rem;

    margin-bottom:22px;

}


.owner-card p,
.team-card p,
.partner-family-card p{

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

    line-height:1.7;

}


.owner-membership,
.investor-message{

    margin-top:30px;

    padding:35px 45px;

    border-radius:32px;

    display:flex;

    align-items:center;

    gap:30px;

}


.membership-badge{

    width:70px;

    height:70px;

    flex:none;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#000;

    font-weight:800;

    background:
    linear-gradient(
        135deg,
        #f2d18b,
        #9b7134
    );

}


.membership-content{

    flex:1;

}


.membership-content p,
.investor-message p{

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

}


/* ========================================================= */
/* 10 — TEAM VALUES                                           */
/* ========================================================= */

.team-values,
.founder-values{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}


.team-value,
.founder-value{

    padding:32px;

    border-radius:28px;

    text-align:center;

}


.team-value p,
.founder-value p{

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

}


/* ========================================================= */
/* 11 — PARTNER STEPS                                         */
/* ========================================================= */

.partner-steps{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}


.step-card{

    padding:32px;

    border-radius:28px;

    text-align:center;

}


.step-card span{

    color:#d4a34d;

    font-size:1.5rem;

    font-weight:700;

}


.step-card p{

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

}


/* ========================================================= */
/* 12 — OPEN DOOR                                             */
/* ========================================================= */

.ars-open-door{

    padding:
    130px 0;

}


.open-door-main{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:60px;

    padding:65px;

    border-radius:42px;

}


.open-door-content p{

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

    line-height:1.85;

}


.open-door-content a{

    display:inline-block;

    margin-top:25px;

    color:#d4a34d;

    text-decoration:none;

}


.open-door-image img{

    width:100%;

    border-radius:30px;

}


.message-types-grid{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}


.message-card{

    padding:35px;

    border-radius:30px;

}


.message-icon{

    font-size:2rem;

    margin-bottom:22px;

}


.message-card p{

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

    line-height:1.7;

}


.founder-connection{

    margin-top:25px;

    padding:45px;

    display:flex;

    align-items:center;

    gap:30px;

    border-radius:35px;

}


.founder-symbol{

    width:90px;

    height:90px;

    display:grid;

    place-items:center;

    flex:none;

    border-radius:50%;

    color:#000;

    font-weight:800;

    background:
    linear-gradient(
        135deg,
        #f2d18b,
        #9b7134
    );

}


.founder-text p{

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

}


/* ========================================================= */
/* 13 — GLOBAL MESSAGE                                        */
/* ========================================================= */

.global-message{

    margin-top:25px;

    padding:50px;

    text-align:center;

    border-radius:34px;

}


.language-tags{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-top:25px;

}


.language-tags span{

    padding:
    10px 18px;

    border-radius:999px;

    color:#d4a34d;

    background:
    rgba(212,163,77,.07);

    border:
    1px solid rgba(212,163,77,.18);

}


/* ========================================================= */
/* 14 — FOUNDER VISION                                        */
/* ========================================================= */

.founder-vision{

    padding:
    130px 0;

}


.founder-card{

    display:grid;

    grid-template-columns:
    .75fr 1.25fr;

    gap:60px;

    align-items:center;

    padding:60px;

    border-radius:42px;

}


.founder-image img{

    width:100%;

    display:block;

    border-radius:30px;

}


.founder-content p{

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

    line-height:1.85;

}


.founder-quote{

    margin-top:25px;

    padding:50px;

    text-align:center;

    border-radius:35px;

}


.founder-quote h2{

    font-size:
    clamp(1.6rem,3vw,3rem);

    line-height:1.35;

}


.founder-quote span{

    color:#d4a34d;

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:.75rem;

}


/* ========================================================= */
/* 15 — FINAL CTA                                             */
/* ========================================================= */

.become-final{

    padding:
    130px 0 100px;

}


.final-card{

    display:grid;

    grid-template-columns:
    1fr 280px;

    align-items:center;

    gap:60px;

    padding:
    clamp(45px,7vw,90px);

    border-radius:45px;

}


.final-content h2{

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

    line-height:.98;

}


.final-content p{

    max-width:700px;

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

    line-height:1.85;

}


.final-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}


.final-symbol{

    display:grid;

    place-items:center;

}


.final-symbol img{

    width:100%;

    max-width:240px;

    filter:
    drop-shadow(
        0 0 45px
        rgba(212,163,77,.25)
    );

    animation:
    finalLogoFloat 6s ease-in-out infinite;

}


@keyframes finalLogoFloat{

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

    50%{
        transform:translateY(-12px);
    }

}


.final-links-grid{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}


.final-link{

    padding:30px;

    border-radius:28px;

    text-decoration:none;

    transition:
    transform .45s ease;

}


.final-link:hover{

    transform:
    translateY(-8px);

}


.final-link h3{

    color:#fff;

}


.final-link p{

    color:#d4a34d;

}


.final-message{

    margin-top:25px;

    padding:50px;

    text-align:center;

    border-radius:35px;

}


.final-message h2{

    font-size:
    clamp(1.8rem,4vw,4rem);

    background:
    linear-gradient(
        100deg,
        #fff,
        #d4a34d,
        #fff
    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}


.final-message p{

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

}


/* ========================================================= */
/* 16 — PREMIUM REVEAL                                        */
/* ========================================================= */

.philosophy-card,
.family-card,
.way-card,
.owner-card,
.team-card,
.partner-family-card,
.message-card,
.final-link{

    animation:
    luxuryReveal .8s ease both;

}


@keyframes luxuryReveal{

    from{

        opacity:0;

        transform:
        translateY(25px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/* ========================================================= */
/* 17 — MOBILE                                                */
/* ========================================================= */

@media(max-width:1100px){

    .become-ars-wrapper,
    .owners-hero,
    .team-hero,
    .partners-main{

        grid-template-columns:1fr;

    }


    .philosophy-cards,
    .owner-cards,
    .team-grid,
    .partners-grid{

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

    }


    .family-grid,
    .ways-grid{

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

    }


    .message-types-grid{

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

    }


    .team-values,
    .founder-values,
    .partner-steps,
    .final-links-grid{

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

    }


    .become-ars-visual{

        min-height:450px;

    }

}


@media(max-width:700px){

    .become-ars-hero{

        min-height:auto;

        padding-top:130px;

    }


    .become-ars-wrapper{

        gap:35px;

    }


    .become-ars-content h1{

        font-size:
        clamp(2.8rem,13vw,5rem);

    }


    .become-buttons{

        flex-direction:column;

    }


    .become-buttons a{

        width:100%;

        text-align:center;

    }


    .become-ars-visual{

        min-height:350px;

        border-radius:30px;

    }


    .philosophy-cards,
    .family-grid,
    .ways-grid,
    .owner-cards,
    .team-grid,
    .partners-grid,
    .message-types-grid,
    .team-values,
    .founder-values,
    .partner-steps,
    .final-links-grid{

        grid-template-columns:1fr;

    }


    .family-card:nth-child(even){

        transform:none;

    }


    .family-banner,
    .open-door-main,
    .founder-card,
    .final-card{

        grid-template-columns:1fr;

        padding:32px;

        border-radius:30px;

    }


    .owners-hero,
    .team-hero,
    .partners-main{

        padding:32px;

        border-radius:30px;

    }


    .ars-journey-timeline{

        padding:32px;

    }


    .timeline-items{

        grid-template-columns:1fr;

        gap:35px;

    }


    .timeline-items::before{

        display:none;

    }


    .owner-membership,
    .investor-message,
    .founder-connection{

        flex-direction:column;

        align-items:flex-start;

        padding:32px;

    }


    .global-message,
    .philosophy-quote,
    .founder-quote,
    .final-message{

        padding:35px 25px;

    }


    .final-symbol{

        order:-1;

    }


    .final-symbol img{

        max-width:150px;

    }

}


/* ========================================================= */
/* 18 — REDUCED MOTION                                        */
/* ========================================================= */

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

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

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

    }

        }

/* ========================================================= */
/*                                                         */
/*       END OF ARS GLOBAL VISUAL DNA                      */
/*       START OF ARS COMPANY UNIQUE DESIGN                */
/*                                                         */
/* ========================================================= */