/* ========================================================= */
/* ARS HERITAGE GROUP — GLOBAL VISUAL DNA                   */
/* ========================================================= */
/* SHARED COLOR SYSTEM — ALL 13 INTERNAL PAGES              */
/* BASED ON ARS HOME PREMIUM VISUAL IDENTITY                 */
/* ========================================================= */

:root{

    /* ===================================================== */
    /* 01 — PRIMARY BACKGROUND                               */
    /* ===================================================== */

    --ars-bg-black:
        #030303;

    --ars-bg-deep:
        #080705;

    --ars-bg-soft:
        #0b0a08;


    /* ===================================================== */
    /* 02 — HERITAGE NAVY / BLUE-BLACK                       */
    /* ===================================================== */

    --ars-navy:
        #0a1726;

    --ars-navy-deep:
        #050d16;

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


    /* ===================================================== */
    /* 03 — PRIMARY GOLD                                      */
    /* ===================================================== */

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

    --ars-gold:
        #c8a45d;

    --ars-gold-main:
        #d8b36a;

    --ars-gold-light:
        #f0d18d;

    --ars-gold-bright:
        #fff0bd;


    /* ===================================================== */
    /* 04 — GOLDEN HIGHLIGHTS                                 */
    /* ===================================================== */

    --ars-gold-highlight:
        #fff3c7;

    --ars-gold-soft:
        rgba(216,179,106,.16);

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

    --ars-gold-ultra-glow:
        rgba(240,209,141,.08);


    /* ===================================================== */
    /* 05 — WHITE SYSTEM                                      */
    /* ===================================================== */

    --ars-white:
        #f5f1e8;

    --ars-white-soft:
        rgba(245,241,232,.72);

    --ars-white-muted:
        rgba(245,241,232,.48);


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

    --ars-glass:
        rgba(255,255,255,.045);

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

    --ars-glass-dark:
        rgba(8,7,5,.72);

    --ars-glass-border:
        rgba(255,240,189,.18);

    --ars-glass-border-hover:
        rgba(255,240,189,.34);


    /* ===================================================== */
    /* 07 — SHADOW SYSTEM                                     */
    /* ===================================================== */

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

    --ars-shadow-soft:
        rgba(0,0,0,.42);

    --ars-shadow-gold:
        rgba(216,179,106,.12);

    --ars-shadow-gold-strong:
        rgba(216,179,106,.24);


    /* ===================================================== */
    /* 08 — PREMIUM TRANSITIONS                               */
    /* ===================================================== */

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

    --ars-transition-slow:
        all .8s cubic-bezier(.16,1,.3,1);

}/* ========================================================= */
/* ARS PREMIUM BACKGROUND DNA                                */
/* ========================================================= */

.ars-page{

    position:
        relative;

    min-height:
        100vh;

    overflow:
        hidden;

    isolation:
        isolate;

    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%
        );

}

/* ========================================================= */
/* 03 — THE 13 A'S — PREMIUM GOLDEN PHILOSOPHY HERO         */
/* ========================================================= */
/*                                                           */
/* PURPOSE:                                                  */
/* - Deep ARS golden illumination                            */
/* - Large premium glass card                               */
/* - Bronze-gold rotating A behind glass                    */
/* - Rotating A ring                                         */
/* - THE 13 A'S gold title                                  */
/* - Smaller 13 pillar list                                 */
/* - Premium glass / gold / navy ARS visual DNA             */
/*                                                           */
/* ========================================================= */


/* ========================================================= */
/* 03.01 — PHILOSOPHY PAGE HERO FOUNDATION                   */
/* ========================================================= */

.philosophy-13a-hero{

    position:
        relative;

    min-height:
        100vh;

    padding:
        150px 0 140px;

    overflow:
        hidden;

    isolation:
        isolate;

    background:

        radial-gradient(
            ellipse at 50% 18%,
            rgba(240,209,141,.24),
            transparent 28%
        ),

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

        radial-gradient(
            ellipse at 22% 48%,
            rgba(200,164,93,.10),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 78% 48%,
            rgba(143,95,45,.10),
            transparent 34%
        ),

        linear-gradient(
            180deg,
            #030303 0%,
            #090806 45%,
            #030303 100%
        );

}


/* ========================================================= */
/* 03.02 — GOLDEN ATMOSPHERIC LIGHT                          */
/* ========================================================= */

.philosophy-13a-hero::before{

    content:
        "";

    position:
        absolute;

    inset:
        -20%;

    z-index:
        -3;

    background:

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

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

        radial-gradient(
            circle at 50% 68%,
            rgba(200,164,93,.08),
            transparent 40%
        );

    filter:
        blur(10px);

    pointer-events:
        none;

}


/* ========================================================= */
/* 03.03 — GOLDEN LIGHT BEAM                                 */
/* ========================================================= */

.philosophy-13a-hero::after{

    content:
        "";

    position:
        absolute;

    top:
        -20%;

    left:
        50%;

    width:
        55%;

    height:
        130%;

    transform:
        translateX(-50%)
        rotate(2deg);

    z-index:
        -2;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(216,179,106,.035),
            rgba(255,240,189,.08),
            rgba(216,179,106,.035),
            transparent
        );

    filter:
        blur(35px);

    pointer-events:
        none;

}


/* ========================================================= */
/* 03.04 — GOLDEN STAR FIELD                                 */
/* ========================================================= */

.philosophy-13a-stars{

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 20% 22%,
            rgba(255,240,189,.16) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 80% 18%,
            rgba(255,240,189,.13) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 14% 68%,
            rgba(216,179,106,.12) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 86% 65%,
            rgba(216,179,106,.12) 0 1px,
            transparent 2px
        );

}


/* ========================================================= */
/* 03.05 — HERO INNER                                       */
/* ========================================================= */

.philosophy-13a-hero-inner{

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

}


/* ========================================================= */
/* 03.06 — MAIN PREMIUM GLASS CARD                          */
/* ========================================================= */

.philosophy-13a-card{

    position:
        relative;

    width:
        min(1050px, 90vw);

    min-height:
        620px;

    padding:
        90px 70px 70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    border:
        1px solid
        rgba(255,240,189,.24);

    border-radius:
        34px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035) 42%,
            rgba(8,7,5,.58) 100%
        );

    box-shadow:

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

        0 0 60px
        rgba(216,179,106,.18),

        0 0 150px
        rgba(216,179,106,.08),

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

        inset 0 0 80px
        rgba(216,179,106,.055);

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

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

}


/* ========================================================= */
/* 03.07 — CARD GOLDEN AURA                                  */
/* ========================================================= */

.philosophy-13a-card::before{

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:

        radial-gradient(
            ellipse at 50% 0%,
            rgba(255,240,189,.18),
            transparent 32%
        ),

        radial-gradient(
            ellipse at 50% 100%,
            rgba(216,179,106,.10),
            transparent 38%
        );

    pointer-events:
        none;

}


/* ========================================================= */
/* 03.08 — LARGE BRONZE GOLDEN A                            */
/* ========================================================= */

.philosophy-13a-great-a{

    position:
        absolute;

    top:
        -135px;

    left:
        50%;

    width:
        460px;

    height:
        460px;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        2;

    pointer-events:
        none;

}


/* ========================================================= */
/* 03.09 — ROTATING A RING                                  */
/* ========================================================= */

.philosophy-13a-ring{

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

    border:

        1px solid
        rgba(240,209,141,.42);

    box-shadow:

        0 0 30px
        rgba(216,179,106,.20),

        0 0 80px
        rgba(216,179,106,.12),

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

    animation:

        ars-philosophy-a-rotation
        24s
        linear
        infinite;

}


/* ========================================================= */
/* 03.10 — SECONDARY ROTATING RING                           */
/* ========================================================= */

.philosophy-13a-ring::before{

    content:
        "";

    position:
        absolute;

    inset:
        18px;

    border-radius:
        50%;

    border:

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

}


/* ========================================================= */
/* 03.11 — LARGE BRONZE GOLD A LETTER                       */
/* ========================================================= */

.philosophy-13a-great-a span{

    position:
        relative;

    z-index:
        3;

    color:
        #b98a45;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        420px;

    font-weight:
        700;

    line-height:
        1;

    opacity:
        .88;

    text-shadow:

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

        0 0 45px
        rgba(143,95,45,.14),

        0 20px 35px
        rgba(0,0,0,.65);

}


/* ========================================================= */
/* 03.12 — CARD CONTENT                                      */
/* ========================================================= */

.philosophy-13a-card-content{

    position:
        relative;

    z-index:
        10;

    width:
        100%;

    padding-top:
        120px;

    text-align:
        center;

}


/* ========================================================= */
/* 03.13 — EYEBROW                                           */
/* ========================================================= */

.philosophy-13a-eyebrow{

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

    font-size:
        .78rem;

    font-weight:
        600;

    letter-spacing:
        .32em;

    text-transform:
        uppercase;

    text-shadow:

        0 0 20px
        rgba(240,209,141,.28);

}


/* ========================================================= */
/* 03.14 — THE 13 A'S — MAIN GOLD TITLE                      */
/* ========================================================= */

.philosophy-13a-title{

    margin-top:
        24px;

    display:
        flex;

    align-items:
        baseline;

    justify-content:
        center;

    gap:
        14px;

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

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

    font-weight:
        500;

    letter-spacing:
        -.045em;

    line-height:
        1;

    text-shadow:

        0 0 10px
        rgba(240,209,141,.28),

        0 0 35px
        rgba(216,179,106,.18);

}


/* ========================================================= */
/* 03.15 — A'S GOLDEN EMPHASIS                              */
/* ========================================================= */

.philosophy-13a-title .a-symbol{

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

    font-weight:
        700;

}


/* ========================================================= */
/* 03.16 — HERO H1                                           */
/* ========================================================= */

.philosophy-13a-card-content h1{

    margin-top:
        26px;

    color:
        var(--ars-white);

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

    font-weight:
        500;

    letter-spacing:
        .025em;

}


/* ========================================================= */
/* 03.17 — VISION LINE                                       */
/* ========================================================= */

.philosophy-13a-vision-line{

    margin-top:
        20px;

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

    font-size:
        .95rem;

    letter-spacing:
        .16em;

}


/* ========================================================= */
/* 03.18 — ARS MARK                                          */
/* ========================================================= */

.philosophy-13a-ars-mark{

    margin-top:
        34px;

    color:
        var(--ars-gold);

    font-size:
        1.05rem;

    font-weight:
        600;

    letter-spacing:
        .28em;

    text-shadow:

        0 0 18px
        rgba(216,179,106,.25);

}


/* ========================================================= */
/* 03.19 — ARS A HIGHLIGHT                                   */
/* ========================================================= */

.philosophy-13a-ars-mark .ars-a{

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

}


/* ========================================================= */
/* 03.20 — ROTATING A ANIMATION                              */
/* ========================================================= */

@keyframes ars-philosophy-a-rotation{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


/* ========================================================= */
/* 03.21 — MOBILE FOUNDATION                                 */
/* ========================================================= */

@media (max-width: 700px){

    .philosophy-13a-hero{

        padding:
            110px 0 90px;

    }


    .philosophy-13a-card{

        width:
            92vw;

        min-height:
            560px;

        padding:
            70px 25px 50px;

    }


    .philosophy-13a-great-a{

        top:
            -95px;

        width:
            330px;

        height:
            330px;

    }


    .philosophy-13a-great-a span{

        font-size:
            300px;

    }


    .philosophy-13a-card-content{

        padding-top:
            90px;

    }


    .philosophy-13a-title{

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

    }


    .philosophy-13a-vision-line{

        font-size:
            .78rem;

        letter-spacing:
            .08em;

    }

             }