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

   DESIGN REFERENCE:
   "13 A's" VISUAL LANGUAGE

   CORE DNA:
   Deep Black
   Warm Metallic Gold
   Bronze
   Premium Dark Glass
   Soft Gold Light
   Cinematic Depth
   Elegant Typography
   Subtle Motion
   ========================================================= */


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

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

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

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

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


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

:root{


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


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

    --ars-black:
        #030303;

    --ars-black-soft:
        #070707;

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

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


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


    /* Main ARS Gold */

    --ars-gold:
        #D0AA63;


    /* Champagne Gold */

    --ars-gold-light:
        #E7C987;


    /* Soft Warm Gold */

    --ars-gold-soft:
        #DDBA73;


    /* Deep Gold */

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


    /* Golden Highlight */

    --ars-gold-highlight:
        #FFF2C2;


    /* Almost White Gold */

    --ars-gold-white:
        #FFF8DF;


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

    --ars-gold-yellow:
        #E7C35F;


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


    /*
       Metallic structure:

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


    --ars-metal-shadow:
        #583719;


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


    --ars-metal-bronze:
        #A8753D;


    --ars-metal-gold:
        #D0AA63;


    --ars-metal-champagne:
        #E7C987;


    --ars-metal-highlight:
        #FFF2C2;


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


    --ars-bronze:
        #895E32;

    --ars-bronze-soft:
        #B98247;

    --ars-bronze-light:
        #D0A060;


    /* Extra Rich Bronze */

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


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


    /*
       Navy remains secondary.

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

       It must NEVER overpower
       Black + Gold.
    */


    --ars-navy:
        #0B1A2A;

    --ars-navy-soft:
        #122336;

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

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


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


    --ars-white:
        #F5F1E8;

    --ars-white-soft:
        #D9D2C6;

    --ars-white-muted:
        #ADA59A;


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


    /* Warm Brown Shadow */

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


    /* Deep Red Shadow
       Very subtle cinematic warmth */

    --ars-shadow-red:
        #291011;


    /* Warm Yellow Shadow */

    --ars-shadow-yellow:
        #624817;


    /* Deep Navy Shadow */

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


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


    /* Soft Gold Light */

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


    /* Medium Gold Light */

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


    /* Strong Gold Light */

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


    /* White Gold Highlight */

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


    /* Bronze Atmospheric Glow */

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


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


    /* Main Premium Dark Glass */

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


    /* Warm Glass */

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


    /* Navy Glass Reflection */

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


    /* Glass Highlight */

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


    /* Glass Border */

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


    /* Glass Border Hover */

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


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


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


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


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


    --ars-radius:
        22px;

    --ars-radius-small:
        14px;

    --ars-radius-large:
        30px;


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


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


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


    --ars-metallic-gold:

        linear-gradient(

            105deg,

            #583719 0%,

            #7A4F27 12%,

            #9F6D38 22%,

            #A8753D 30%,

            #D0AA63 42%,

            #E7C987 52%,

            #FFF2C2 58%,

            #E7C987 65%,

            #D0AA63 76%,

            #A8753D 86%,

            #7A4F27 94%,

            #583719 100%

        );


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


    --ars-gold-line:

        linear-gradient(

            90deg,

            transparent 0%,

            #7A4F27 10%,

            #A8753D 22%,

            #D0AA63 35%,

            #E7C987 45%,

            #FFF2C2 50%,

            #E7C987 55%,

            #D0AA63 65%,

            #A8753D 78%,

            #7A4F27 90%,

            transparent 100%

        );


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


    --ars-cinematic-gold:

        radial-gradient(

            circle,

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

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

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

            transparent 85%

        );


    /* Cinematic Bronze Atmosphere */

    --ars-cinematic-bronze:

        radial-gradient(

            circle,

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

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

            transparent 85%

        );


    /* Cinematic Navy */

    --ars-cinematic-navy:

        radial-gradient(

            circle,

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

            transparent 85%

        );


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


    --ars-card-background:

        linear-gradient(

            145deg,

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

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

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

        );


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


    --ars-card-shadow:

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

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

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

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

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


    --ars-card-shadow-hover:

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

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

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

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

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

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    background:

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

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

    color:
        var(--ars-white);

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

    font-size:
        15px;

    line-height:
        1.8;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;
}


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

.container{

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

    margin:
        0 auto;

    position:
        relative;

    z-index:
        2;
}


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

section{

    position:
        relative;

    padding:
        110px 0;

    overflow:
        hidden;
}


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

.section-heading{

    max-width:
        850px;

    margin:
        0 auto 70px;

    text-align:
        center;

}


.section-label{

    display:
        inline-block;

    margin-bottom:
        18px;

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

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

    position:
        relative;

}


/* Gold line under section label */

.section-label::after{

    content:
        "";

    display:
        block;

    width:
        34px;

    height:
        1px;

    margin:
        10px auto 0;

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

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

}


.section-heading h2{

    color:
        var(--ars-white);

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

    line-height:
        1.18;

    font-weight:
        500;

    letter-spacing:
        -.025em;

    margin-bottom:
        22px;

}


.section-heading p{

    max-width:
        720px;

    margin:
        0 auto;

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

    font-size:
        15px;

    line-height:
        1.9;

}


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

.ars-glass{

    position:
        relative;

    background:

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

        var(--ars-glass);

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

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

    backdrop-filter:
        blur(20px);

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

    box-shadow:

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

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

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

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

}


/* Premium light reflection */

.ars-glass::before{

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    right:
        8%;

    height:
        1px;

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

    opacity:
        .45;

}


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

.ars-glass:hover{

    transform:
        translateY(-8px);

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

    box-shadow:

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

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

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

}


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

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

    padding:
        34px;

    min-height:
        240px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

}


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

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

    font-size:
        19px;

    font-weight:
        500;

    letter-spacing:
        -.01em;

    margin:
        14px 0 12px;

}


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

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

    font-size:
        14px;

    line-height:
        1.85;

}


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

.pillar-number,
.roadmap-year{

    color:
        var(--ars-gold);

    font-size:
        11px;

    letter-spacing:
        .25em;

    font-weight:
        600;

}


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

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

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -30px;

    bottom:
        -30px;

    border-radius:
        50%;

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

    pointer-events:
        none;

}


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

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

    font-size:
        28px;

    filter:
        grayscale(.15);

    opacity:
        .9;

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

}


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

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

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

}


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

.hero-buttons{

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        30px;

}


.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 26px;

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        12px;

    letter-spacing:
        .08em;

    transition:
        var(--ars-transition);

}


.btn-primary{

    color:
        #0A0805;

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

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

}


.btn-secondary{

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

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

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

}


.btn-primary:hover{

    transform:
        translateY(-3px);

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

}


.btn-secondary:hover{

    transform:
        translateY(-3px);

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

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

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

}


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

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

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

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

    overflow:
        hidden;

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

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

}


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

    width:
        100%;

    height:
        auto;

    display:
        block;

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

}


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

    transform:
        scale(1.025);

}


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

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

    padding:
        50px;

    margin-top:
        70px;

    text-align:
        center;

}


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

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

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

    font-weight:
        500;

    margin-bottom:
        16px;

}


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

    max-width:
        760px;

    margin:
        0 auto;

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

    font-size:
        14px;

    line-height:
        1.9;

}


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

section::before{

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        20%;

    left:
        50%;

    transform:
        translateX(-50%);

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

    pointer-events:
        none;

}


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

@keyframes arsReveal{

    from{

        opacity:
            0;

        transform:
            translateY(35px);

    }

    to{

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.ars-glass{

    animation:
        arsReveal .9s ease both;

}


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

@keyframes arsGoldSweep{

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

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

}


.ars-glass::after{

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -100%;

    width:
        45%;

    height:
        100%;

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

    transform:
        skewX(-20deg);

    pointer-events:
        none;

    opacity:
        0;

}


.ars-glass:hover::after{

    opacity:
        1;

    animation:
        arsGoldSweep 1.2s ease;

}


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

@media(max-width:900px){

    .container{

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

    }

    section{

        padding:
            80px 0;

    }

    .section-heading{

        margin-bottom:
            45px;

    }

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

        padding:
            26px;

        min-height:
            auto;

    }

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

        padding:
            34px 25px;

    }

}


@media(max-width:600px){

    body{

        font-size:
            14px;

    }

    .container{

        width:
            calc(100% - 28px);

    }

    section{

        padding:
            65px 0;

    }

    .section-heading h2{

        font-size:
            28px;

    }

    .section-heading p{

        font-size:
            14px;

    }

    .hero-buttons{

        flex-direction:
            column;

    }

    .btn-primary,
    .btn-secondary{

        width:
            100%;

    }

    .ars-glass:hover{

        transform:
            translateY(-4px);

    }

}

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

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

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


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

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



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

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

    position: relative;

    background:

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

    border:

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

    box-shadow:

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

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

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

    backdrop-filter:
        blur(18px);

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

    transition:

        transform 0.45s ease,

        border-color 0.45s ease,

        box-shadow 0.45s ease,

        background 0.45s ease;

}


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

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

    content: "";

    position: absolute;

    top: 0;

    left: 8%;

    width: 84%;

    height: 1px;

    background:

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

    opacity: 0.7;

}


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

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

    transform:

        translateY(-8px);

    border-color:

        rgba(242, 213, 141, 0.75);

    background:

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

    box-shadow:

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

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

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

}


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

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

    color:

        #e7c979;

    text-shadow:

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

}


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


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

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

    position: relative;

    overflow: hidden;

    background:

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

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

    border:

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

    border-radius:

        22px;

    backdrop-filter:

        blur(22px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(22px)
        saturate(125%);

    box-shadow:

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

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

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

    transition:

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

        border-color .45s ease,

        box-shadow .55s ease;

}


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

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

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

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

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

    opacity: .85;

}


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

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

    content: "";

    position: absolute;

    top: 0;

    left: 8%;

    width: 84%;

    height: 1px;

    background:

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

    opacity: .8;

}


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

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

    transform:

        translateY(-10px);

    border-color:

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

    box-shadow:

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

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

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

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

}

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


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

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

    transform:

        perspective(1000px)

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

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

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

    transform-style:
        preserve-3d;

    will-change:
        transform;

}


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

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

    opacity:
        0;

    transform:

        perspective(1000px)

        translateY(45px)

        rotateX(7deg)

        scale(.97);

    transition:

        opacity .8s ease,

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

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

}


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

    opacity:
        1;

    transform:

        perspective(1000px)

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

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

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

        scale(1);

}


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

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

    position:
        absolute;

    pointer-events:
        none;

    width:
        260px;

    height:
        260px;

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

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

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

    background:

        radial-gradient(

            circle,

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

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

            transparent
            70%

        );

    filter:
        blur(18px);

    opacity:
        0;

    transition:
        opacity .45s ease;

    mix-blend-mode:
        screen;

}


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

    opacity:
        1;

}


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

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

    backdrop-filter:

        blur(26px)
        saturate(145%);

    -webkit-backdrop-filter:

        blur(26px)
        saturate(145%);

    box-shadow:

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

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

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

}


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

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

    body.brain-test-page
    * {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}