/* =========================================================
   ARS HERITAGE GROUP — HOME
   PREMIUM INTELLIGENCE UNIVERSE
   =========================================================
   MASTER CSS — STYLE HOME 3
   VISUAL DNA / COLOR ARCHITECTURE
   =========================================================

   DESIGN LANGUAGE:

   Heritage × Luxury × Engineering × Intelligence
   Obsidian × Navy × Gold × Bronze × Electric Blue
   ========================================================= */


/* =========================================================
   01 — HOME MASTER VISUAL DNA
   ========================================================= */


/* =========================================================
   01.1 — OBSIDIAN BLACK
   PRIMARY DEPTH
   ========================================================= */

:root {

    --home-black-obsidian:
        #030405;

    --home-black-deep:
        #050607;

    --home-black-void:
        #010203;

    --home-black-carbon:
        #080a0c;

    --home-black-warm:
        #0b0806;


    /* =====================================================
       01.2 — DEEP NAVY
       PREMIUM TECHNOLOGY DEPTH
       ===================================================== */

    --home-navy-void:
        #050b14;

    --home-navy-deep:
        #07111f;

    --home-navy:
        #0a1627;

    --home-navy-rich:
        #0d1b2f;

    --home-navy-glass:
        rgba(8, 20, 38, .72);


    /* =====================================================
       01.3 — TRUE GOLD
       ARS HERITAGE / LUXURY SIGNATURE
       ===================================================== */

    --home-gold-deep:
        #8f681c;

    --home-gold-dark:
        #a87920;

    --home-gold:
        #c9a227;

    --home-gold-rich:
        #d6b64a;

    --home-gold-light:
        #ecd98a;

    --home-gold-white:
        #fff1b5;


    /* =====================================================
       01.4 — MATTE BRONZE
       ENGINEERING / MATERIAL SIGNATURE
       ===================================================== */

    --home-bronze-deep:
        #4c321e;

    --home-bronze-dark:
        #68462a;

    --home-bronze:
        #815a37;

    --home-bronze-matte:
        #9a7048;

    --home-bronze-light:
        #b58a5d;


    /* =====================================================
       01.5 — ELECTRIC BLUE
       ARS INTELLIGENCE SIGNATURE
       ===================================================== */

    --home-blue-deep:
        #002b52;

    --home-blue-dark:
        #004b82;

    --home-blue:
        #0077c8;

    --home-blue-electric:
        #00a8ff;

    --home-blue-bright:
        #35c3ff;

    --home-blue-white:
        #b9edff;


    /* =====================================================
       01.6 — PREMIUM WHITE
       PRECISION / TYPOGRAPHY / CORE LIGHT
       ===================================================== */

    --home-white:
        #ffffff;

    --home-white-soft:
        #f4f5f6;

    --home-white-silver:
        #dfe4e8;

    --home-white-muted:
        #aeb8c2;

    --home-white-blue:
        #d9f5ff;


    /* =====================================================
       01.7 — DEEP RED
       HIDDEN ENERGY / WARNING / SHADOW
       ===================================================== */

    --home-red-deep:
        #260607;

    --home-red-dark:
        #4a0c0e;

    --home-red:
        #761519;

    --home-red-energy:
        #a51e23;

    --home-red-glow:
        #d52d32;


    /* =====================================================
       01.8 — HERITAGE BROWN
       WARM SHADOW / MATERIAL DEPTH
       ===================================================== */

    --home-brown-void:
        #100a06;

    --home-brown-deep:
        #1b1009;

    --home-brown:
        #2b180d;

    --home-brown-rich:
        #402413;

    --home-brown-warm:
        #5a351d;


    /* =====================================================
       01.9 — TRANSPARENT ENERGY COLORS
       ===================================================== */

    --home-gold-energy:
        rgba(201, 162, 39, .72);

    --home-gold-soft:
        rgba(201, 162, 39, .28);

    --home-blue-energy:
        rgba(0, 168, 255, .72);

    --home-blue-soft:
        rgba(0, 168, 255, .24);

    --home-bronze-energy:
        rgba(154, 112, 72, .42);

    --home-red-energy:
        rgba(165, 30, 35, .32);


    /* =====================================================
       01.10 — MASTER BACKGROUND GRADIENTS
       ===================================================== */

    --home-bg-main:

        radial-gradient(
            circle at 50% 42%,
            #101d2b 0%,
            #08111d 25%,
            #050a11 48%,
            #020405 75%,
            #010203 100%
        );


    --home-bg-luxury:

        radial-gradient(
            circle at 50% 50%,
            rgba(201,162,39,.12) 0%,
            rgba(129,90,55,.06) 22%,
            rgba(0,168,255,.035) 42%,
            transparent 70%
        );


    --home-bg-intelligence:

        radial-gradient(
            circle at 50% 45%,
            rgba(0,168,255,.10) 0%,
            rgba(0,119,200,.055) 28%,
            transparent 68%
        );


    --home-bg-shadow:

        radial-gradient(
            circle at 50% 100%,
            rgba(76,32,30,.12),
            transparent 62%
        );


    /* =====================================================
       01.11 — GLASS SYSTEM
       ===================================================== */

    --home-glass-dark:
        rgba(3, 8, 14, .76);

    --home-glass-navy:
        rgba(7, 17, 31, .72);

    --home-glass-light:
        rgba(20, 34, 51, .48);

    --home-glass-border:
        rgba(201, 162, 39, .22);

    --home-glass-border-blue:
        rgba(0, 168, 255, .24);


    /* =====================================================
       01.12 — MASTER SHADOW SYSTEM
       ===================================================== */

    --home-shadow-black:
        0 30px 90px rgba(0,0,0,.72);

    --home-shadow-gold:
        0 0 55px rgba(201,162,39,.20);

    --home-shadow-blue:
        0 0 55px rgba(0,168,255,.18);

    --home-shadow-bronze:
        0 0 45px rgba(129,90,55,.18);

    --home-shadow-red:
        0 0 50px rgba(118,21,25,.14);


    /* =====================================================
       01.13 — GOLD + BLUE HYBRID ENERGY
       ===================================================== */

    --home-energy-hybrid:

        linear-gradient(
            135deg,
            rgba(201,162,39,.95),
            rgba(236,217,138,.8) 35%,
            rgba(0,168,255,.9) 70%,
            rgba(53,195,255,.7)
        );


    /* =====================================================
       01.14 — MASTER METALLIC GOLD
       ===================================================== */

    --home-metal-gold:

        linear-gradient(
            135deg,
            #765117 0%,
            #a87920 20%,
            #d6b64a 42%,
            #fff1b5 52%,
            #c9a227 67%,
            #8f681c 100%
        );


    /* =====================================================
       01.15 — MASTER BRONZE METAL
       ===================================================== */

    --home-metal-bronze:

        linear-gradient(
            135deg,
            #3d2818,
            #68462a 30%,
            #9a7048 52%,
            #5c3c24 75%,
            #2b1a0e
        );


    /* =====================================================
       01.16 — ELECTRIC BLUE CORE
       ===================================================== */

    --home-electric-core:

        radial-gradient(
            circle,
            #ffffff 0%,
            #b9edff 8%,
            #35c3ff 20%,
            #00a8ff 38%,
            #004b82 65%,
            transparent 100%
        );


    /* =====================================================
       01.17 — GOLDEN CORE
       ===================================================== */

    --home-golden-core:

        radial-gradient(
            circle,
            #fff8d6 0%,
            #ecd98a 10%,
            #d6b64a 25%,
            #c9a227 45%,
            #8f681c 68%,
            transparent 100%
        );


    /* =====================================================
       01.18 — MASTER ENERGY BLEND
       ===================================================== */

    --home-master-energy:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.95) 0%,
            rgba(236,217,138,.85) 5%,
            rgba(201,162,39,.65) 15%,
            rgba(0,168,255,.38) 32%,
            rgba(0,75,130,.20) 48%,
            transparent 72%
        );


    /* =====================================================
       01.19 — TYPOGRAPHY COLOR DNA
       ===================================================== */

    --home-text-primary:
        #ffffff;

    --home-text-secondary:
        #dfe4e8;

    --home-text-muted:
        #aeb8c2;

    --home-text-gold:
        #ecd98a;

    --home-text-blue:
        #35c3ff;

    --home-text-bronze:
        #b58a5d;


    /* =====================================================
       01.20 — INTERACTION STATES
       ===================================================== */

    --home-hover-gold:
        #ecd98a;

    --home-hover-blue:
        #35c3ff;

    --home-active-gold:
        #fff1b5;

    --home-active-blue:
        #b9edff;


    /* =====================================================
       01.21 — MASTER RADIATION
       ===================================================== */

    --home-radiation-gold:

        radial-gradient(
            ellipse,
            rgba(201,162,39,.24),
            rgba(201,162,39,.08) 35%,
            transparent 72%
        );


    --home-radiation-blue:

        radial-gradient(
            ellipse,
            rgba(0,168,255,.20),
            rgba(0,119,200,.07) 36%,
            transparent 72%
        );


    /* =====================================================
       01.22 — MASTER BORDER SYSTEM
       ===================================================== */

    --home-border-gold:
        rgba(201,162,39,.32);

    --home-border-gold-strong:
        rgba(236,217,138,.65);

    --home-border-blue:
        rgba(0,168,255,.30);

    --home-border-blue-strong:
        rgba(53,195,255,.72);

    --home-border-bronze:
        rgba(154,112,72,.35);


    /* =====================================================
       01.23 — MASTER Z-DEPTH
       ===================================================== */

    --home-depth-01:
        0;

    --home-depth-02:
        10;

    --home-depth-03:
        20;

    --home-depth-04:
        30;

    --home-depth-05:
        40;

    --home-depth-core:
        100;


    /* =====================================================
       01.24 — MASTER TRANSITION DNA
       ===================================================== */

    --home-ease-premium:
        cubic-bezier(.16,1,.3,1);

    --home-ease-energy:
        cubic-bezier(.22,1,.36,1);

    --home-ease-soft:
        cubic-bezier(.25,.8,.25,1);

    --home-ease-cinematic:
        cubic-bezier(.19,1,.22,1);


    /* =====================================================
       01.25 — MASTER GLOW INTENSITY
       ===================================================== */

    --home-glow-low:
        .18;

    --home-glow-medium:
        .35;

    --home-glow-high:
        .58;

    --home-glow-extreme:
        .82;

  }

/* =========================================================
   ARS HERITAGE GROUP — HOME
   PREMIUM INTELLIGENCE UNIVERSE
   =========================================================
   STYLE HOME 3
   02 — HOME GLOBAL FOUNDATION
   =========================================================

   ARCHITECTURE LOCKED:

   01 — MASTER VISUAL DNA
   02 — GLOBAL FOUNDATION

   HTML TARGET:
   index / Home

   DESIGN PRINCIPLES:

   Heritage × Luxury × Engineering × Intelligence

   Obsidian × Deep Navy × Gold × Bronze
   White × Electric Blue
   Deep Red × Heritage Brown

   IMPORTANT:

   This file is written specifically for the
   supplied ARS Heritage Group Home HTML.

   No structural HTML replacement.
   No dependency on generic page CSS.
   No uncontrolled global overrides.

   ========================================================= */


/* =========================================================
   02 — HOME GLOBAL FOUNDATION
   ========================================================= */


/* =========================================================
   02.1 — HOME BOX MODEL
   ========================================================= */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/* =========================================================
   02.2 — BODY FOUNDATION
   ========================================================= */

html,
body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {

    position: relative;

    overflow-x: hidden;

    background:
        var(--home-bg-main);

    color:
        var(--home-text-primary);

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

    font-weight: 400;

    line-height: 1.6;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    isolation: isolate;
}


/* =========================================================
   02.3 — BODY ATMOSPHERIC DEPTH
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -10;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 50% 15%,
            rgba(0,168,255,.045),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 50% 55%,
            rgba(201,162,39,.035),
            transparent 48%
        ),

        radial-gradient(
            ellipse at 10% 90%,
            rgba(76,32,30,.055),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 90% 90%,
            rgba(43,24,13,.06),
            transparent 42%
        );

    opacity: .95;
}


/* =========================================================
   02.4 — GLOBAL SURFACE
   ========================================================= */

body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -9;

    pointer-events: none;

    background-image:

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

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

    background-size:
        90px 90px;

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

    opacity: .22;
}


/* =========================================================
   02.5 — MEDIA FOUNDATION
   ========================================================= */

img,
svg,
video,
canvas {

    display: block;

    max-width: 100%;

}


/* =========================================================
   02.6 — IMAGE RENDERING
   ========================================================= */

img {

    height: auto;

    image-rendering: auto;

}


/* =========================================================
   02.7 — LINK FOUNDATION
   ========================================================= */

a {

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   02.8 — BUTTON FOUNDATION
   ========================================================= */

button,
input,
textarea,
select {

    font: inherit;

}


/* =========================================================
   02.9 — INTERACTIVE FOUNDATION
   ========================================================= */

button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   02.10 — TEXT SELECTION
   ========================================================= */

::selection {

    color:
        var(--home-black-void);

    background:
        var(--home-gold-light);

    text-shadow:
        none;
}


/* =========================================================
   02.11 — HOME CONTAINER
   ========================================================= */

.container {

    width: min(
        100% - 48px,
        1480px
    );

    margin-inline: auto;

    position: relative;

    z-index: 5;
}


/* =========================================================
   02.12 — CONTAINER LARGE
   ========================================================= */

@media (min-width: 1600px) {

    .container {

        width: min(
            100% - 80px,
            1580px
        );

    }

}


/* =========================================================
   02.13 — CONTAINER XL
   ========================================================= */

@media (min-width: 1900px) {

    .container {

        width: min(
            100% - 120px,
            1720px
        );

    }

}


/* =========================================================
   02.14 — SECTION FOUNDATION
   ========================================================= */

section {

    position: relative;

    width: 100%;

    isolation: isolate;
}


/* =========================================================
   02.15 — SECTION CONTENT SAFETY
   ========================================================= */

section > .container {

    position: relative;

    z-index: 5;
}


/* =========================================================
   02.16 — GLOBAL SECTION SPACING
   ========================================================= */

.about-ars,
.mission-vision,
.ars-philosophy-home,
.ecosystem,
.future-roadmap,
.future-vision {

    position: relative;

    padding-block:
        clamp(110px, 10vw, 180px);

}


/* =========================================================
   02.17 — SECTION HEADER FOUNDATION
   ========================================================= */

.section-header {

    position: relative;

    max-width: 1000px;

    margin-inline: auto;

    margin-bottom:
        clamp(55px, 6vw, 100px);

    text-align: center;

    z-index: 10;
}


/* =========================================================
   02.18 — SECTION LABEL FOUNDATION
   ========================================================= */

.section-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    position: relative;

    margin-bottom: 18px;

    padding:
        7px 15px;

    border:
        1px solid
        var(--home-border-gold);

    border-radius: 999px;

    background:

        linear-gradient(
            135deg,
            rgba(201,162,39,.08),
            rgba(0,168,255,.045)
        );

    color:
        var(--home-text-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

    box-shadow:
        0 0 25px
        rgba(201,162,39,.08);

    backdrop-filter:
        blur(12px);

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


/* =========================================================
   02.19 — SECTION LABEL ENERGY LINE
   ========================================================= */

.section-label::before {

    content: "";

    width: 5px;
    height: 5px;

    margin-right: 10px;

    border-radius: 50%;

    background:
        var(--home-blue-electric);

    box-shadow:

        0 0 8px
        rgba(0,168,255,.9),

        0 0 18px
        rgba(0,168,255,.55);

}


/* =========================================================
   02.20 — SECTION HEADING FOUNDATION
   ========================================================= */

.section-header h2 {

    margin: 0;

    color:
        var(--home-white);

    font-size:
        clamp(38px, 5vw, 78px);

    font-weight:
        700;

    line-height:
        1.03;

    letter-spacing:
        -.035em;

    text-wrap:
        balance;

    text-shadow:

        0 2px 24px
        rgba(0,0,0,.55),

        0 0 45px
        rgba(0,168,255,.035);
}


/* =========================================================
   02.21 — SECTION HEADING ACCENT
   ========================================================= */

.section-header h2::first-letter {

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

}


/* =========================================================
   02.22 — SECTION PARAGRAPH
   ========================================================= */

.section-header p {

    max-width:
        780px;

    margin:
        25px auto 0;

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

    font-size:
        clamp(15px, 1.35vw, 19px);

    line-height:
        1.85;

}


/* =========================================================
   02.23 — PREMIUM SCROLLBAR
   ========================================================= */

html {

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--home-gold-deep)
        var(--home-black-void);
}


/* =========================================================
   02.24 — WEBKIT SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width: 8px;

}


/* =========================================================
   02.25 — SCROLLBAR TRACK
   ========================================================= */

::-webkit-scrollbar-track {

    background:
        var(--home-black-void);

}


/* =========================================================
   02.26 — SCROLLBAR THUMB
   ========================================================= */

::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    border:
        2px solid
        var(--home-black-void);

    background:

        linear-gradient(
            180deg,
            var(--home-gold-light),
            var(--home-gold-dark),
            var(--home-bronze-deep)
        );

    box-shadow:

        0 0 12px
        rgba(201,162,39,.35);

}


/* =========================================================
   02.27 — SCROLLBAR HOVER
   ========================================================= */

::-webkit-scrollbar-thumb:hover {

    background:

        linear-gradient(
            180deg,
            var(--home-white),
            var(--home-gold-light),
            var(--home-blue-electric)
        );

    box-shadow:

        0 0 15px
        rgba(0,168,255,.5),

        0 0 25px
        rgba(201,162,39,.35);

}


/* =========================================================
   02.28 — HOME GLOBAL LIGHT
   ========================================================= */

.home-global-light {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -5;

}


/* =========================================================
   02.29 — GLOBAL ENERGY VIGNETTE
   ========================================================= */

body {

    background-color:
        var(--home-black-void);

    background-image:

        radial-gradient(
            ellipse at 50% 35%,
            rgba(7,17,31,.85),
            transparent 58%
        ),

        radial-gradient(
            ellipse at 50% 0%,
            rgba(0,168,255,.035),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #010203 0%,
            #030507 38%,
            #05080c 70%,
            #020304 100%
        );

}


/* =========================================================
   02.30 — PREMIUM EDGE VIGNETTE
   ========================================================= */

body {

    box-shadow:
        inset 0 0 180px
        rgba(0,0,0,.72);

}


/* =========================================================
   02.31 — PERFORMANCE CONTAINMENT
   ========================================================= */

.hero,
.ecosystem,
.about-ars,
.mission-vision,
.ars-philosophy-home,
.future-roadmap,
.future-vision {

    contain:
        layout style;

}


/* =========================================================
   02.32 — GPU-SAFE ANIMATION BASE
   ========================================================= */

.home-energy-universe,
.ars-orbit,
.orbit-core,
.orbit-item,
.orbit-node-energy,
.home-master-orbit,
.home-energy-ray,
.home-energy-link,
.home-particle {

    transform:
        translateZ(0);

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

}


/* =========================================================
   02.33 — GLOBAL ENERGY TRANSITION
   ========================================================= */

a,
button,
.ars-glass-card,
.orbit-item,
.orbit-core {

    transition:

        transform
        .65s var(--home-ease-premium),

        opacity
        .5s var(--home-ease-soft),

        border-color
        .5s var(--home-ease-premium),

        box-shadow
        .65s var(--home-ease-premium),

        filter
        .65s var(--home-ease-premium);

}


/* =========================================================
   02.34 — REDUCED MOTION SAFETY
   ========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }

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

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   02.35 — MOBILE CONTAINER
   ========================================================= */

@media (max-width: 768px) {

    .container {

        width:
            min(
                100% - 30px,
                680px
            );

    }

    .about-ars,
    .mission-vision,
    .ars-philosophy-home,
    .ecosystem,
    .future-roadmap,
    .future-vision {

        padding-block:
            90px;

    }

}


/* =========================================================
   02.36 — SMALL MOBILE FOUNDATION
   ========================================================= */

@media (max-width: 480px) {

    .container {

        width:
            calc(100% - 24px);

    }

    .section-header {

        margin-bottom:
            45px;

    }

    .section-label {

        font-size:
            9px;

        letter-spacing:
            .17em;

    }

}


/* =========================================================
   02.37 — HOME MASTER DEPTH
   ========================================================= */

.hero {

    position: relative;

    z-index: 1;

    overflow: hidden;

    background:
        var(--home-black-void);

}


/* =========================================================
   02.38 — HERO DEPTH FLOOR
   ========================================================= */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 50% 48%,
            rgba(0,168,255,.055),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 50% 52%,
            rgba(201,162,39,.065),
            transparent 58%
        );

}


/* =========================================================
   02.39 — HERO EDGE VIGNETTE
   ========================================================= */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.72),
            transparent 20%,
            transparent 80%,
            rgba(0,0,0,.72)
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.48),
            transparent 18%,
            transparent 82%,
            rgba(0,0,0,.68)
        );

}


/* =========================================================
   02.40 — HERO CONTENT SAFETY LAYER
   ========================================================= */

.hero .container {

    position: relative;

    z-index: 20;

}


/* =========================================================
   02.41 — HERO WRAPPER FOUNDATION
   ========================================================= */

.hero-wrapper {

    position: relative;

    min-height:
        200vh;

    isolation: isolate;

}


/* =========================================================
   02.42 — HERO CINEMATIC HEIGHT LOCK
   ========================================================= */

@media (min-width: 769px) {

    .hero {

        min-height:
            200vh;

    }

}


/* =========================================================
   02.43 — HERO MOBILE HEIGHT
   ========================================================= */

@media (max-width: 768px) {

    .hero,
    .hero-wrapper {

        min-height:
            1500px;

    }

}


/* =========================================================
   02.44 — HOME ORBIT SPACE RESERVATION
   ========================================================= */

.hero .ars-orbit {

    position: absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        8;

    pointer-events:
        none;

}


/* =========================================================
   02.45 — ORBIT INTERACTION RESTORATION
   ========================================================= */

.hero .orbit-item,
.hero .orbit-core {

    pointer-events:
        auto;

}


/* =========================================================
   02.46 — HERO CONTENT LAYER
   ========================================================= */

.hero-content {

    position: relative;

    z-index:
        30;

}


/* =========================================================
   02.47 — HERO BACKGROUND LAYER
   ========================================================= */

.hero-background {

    position: absolute;

    inset:
        0;

    z-index:
        -4;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at 50% 45%,
            rgba(7,17,31,.55),
            transparent 55%
        );

}


/* =========================================================
   02.48 — HERO STARS FOUNDATION
   ========================================================= */

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

    position: absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    opacity:
        .45;

    mix-blend-mode:
        screen;

}


/* =========================================================
   02.49 — HERO STAR FIELD 01
   ========================================================= */

.hero-stars {

    background-image:

        radial-gradient(
            circle,
            rgba(255,255,255,.7) 0 1px,
            transparent 1.5px
        );

    background-size:
        97px 113px;

    background-position:
        12px 19px;

    animation:
        homeStarsDrift
        45s linear infinite;

}


/* =========================================================
   02.50 — HERO STAR FIELD 02
   ========================================================= */

.hero-stars-2 {

    opacity:
        .25;

    background-image:

        radial-gradient(
            circle,
            rgba(0,168,255,.85) 0 1px,
            transparent 1.8px
        );

    background-size:
        173px 149px;

    background-position:
        63px 41px;

    animation:
        homeStarsDriftReverse
        65s linear infinite;

}


/* =========================================================
   02.51 — STAR ANIMATION
   ========================================================= */

@keyframes homeStarsDrift {

    from {

        transform:
            translate3d(0,0,0);

    }

    to {

        transform:
            translate3d(-90px,55px,0);

    }

}


/* =========================================================
   02.52 — STAR REVERSE ANIMATION
   ========================================================= */

@keyframes homeStarsDriftReverse {

    from {

        transform:
            translate3d(0,0,0);

    }

    to {

        transform:
            translate3d(110px,-70px,0);

    }

}


/* =========================================================
   02.53 — MOBILE STAR REDUCTION
   ========================================================= */

@media (max-width: 768px) {

    .hero-stars {

        opacity:
            .28;

        animation-duration:
            75s;

    }

    .hero-stars-2 {

        opacity:
            .14;

        animation-duration:
            95s;

    }

}


/* =========================================================
   02.54 — GLOBAL FOCUS ACCESSIBILITY
   ========================================================= */

:focus-visible {

    outline:
        1px solid
        var(--home-blue-bright);

    outline-offset:
        5px;

    box-shadow:

        0 0 0 3px
        rgba(0,168,255,.12),

        0 0 25px
        rgba(0,168,255,.18);

}


/* =========================================================
   02.55 — FINAL FOUNDATION LOCK
   ========================================================= */

/*
   02 COMPLETE.

   The Home page now has:

   • Premium black depth
   • Deep navy technology atmosphere
   • Gold heritage lighting
   • Bronze material depth
   • Electric blue intelligence signature
   • White precision light
   • Red / brown shadow spectrum
   • Cinematic 2× Hero space
   • Dedicated orbital interaction layer
   • Dedicated content layer
   • GPU-safe animation foundation
   • Premium scrollbar
   • Responsive foundation
   • Reduced-motion safety
   • No HTML restructuring

   NEXT:

   03 — HEADER / BRAND SYSTEM
   04 — HERO MASTER ARCHITECTURE
   05 — DEEP ENERGY UNIVERSE
   06 — RADIATION FIELD
   07 — ORBITAL SYSTEM
   08 — CENTRAL CORE
   09 — 13 ORBITAL NODES
   10 — HERO CONTENT
   11 — HERO BUTTONS
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME PREMIUM CSS
   FILE 02.1
   HERO + ORBITAL UNIVERSE FOUNDATION
   ========================================================= */

/* =========================================================
   02.1.01 — HERO MASTER
   ========================================================= */

.hero {
    position: relative;
    min-height: 200vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(20, 31, 48, 0.55),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(8, 38, 64, 0.30),
            transparent 52%
        ),
        var(--ars-black-deep);

    color: var(--ars-white);

    perspective: 1800px;
}


/* =========================================================
   02.1.02 — HERO BACKGROUND
   ========================================================= */

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -10;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.035),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #010203 0%,
            #03070c 35%,
            #020407 70%,
            #010101 100%
        );

    pointer-events: none;
}


/* =========================================================
   02.1.03 — CINEMATIC DEEP SPACE
   ========================================================= */

.hero-background::before {
    content: "";
    position: absolute;
    inset: -20%;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(0, 174, 255, 0.08),
            transparent 22%
        ),
        radial-gradient(
            circle at 28% 32%,
            rgba(180, 130, 55, 0.055),
            transparent 18%
        ),
        radial-gradient(
            circle at 74% 68%,
            rgba(100, 35, 20, 0.06),
            transparent 22%
        );

    filter: blur(35px);

    animation:
        heroAtmosphere 18s ease-in-out infinite alternate;
}


/* =========================================================
   02.1.04 — HERO ATMOSPHERE
   ========================================================= */

.hero-background::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0,
            transparent 85px,
            rgba(255,255,255,0.012) 86px,
            transparent 88px
        );

    opacity: .45;
    mix-blend-mode: screen;

    animation:
        atmosphereDrift 35s linear infinite;
}


/* =========================================================
   02.1.05 — HERO STAR FIELD
   ========================================================= */

.hero-stars,
.hero-stars-2 {
    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: -5;
}

.hero-stars {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 1.5px);

    background-size:
        170px 170px,
        290px 290px;

    background-position:
        20px 30px,
        90px 120px;

    opacity: .28;

    animation:
        starDrift 80s linear infinite;
}

.hero-stars-2 {
    background-image:
        radial-gradient(circle, rgba(0,174,255,.65) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(210,160,70,.45) 0 1px, transparent 1.5px);

    background-size:
        330px 330px,
        470px 470px;

    opacity: .18;

    animation:
        starDriftReverse 110s linear infinite;
}


/* =========================================================
   02.1.06 — HERO CONTAINER
   ========================================================= */

.hero > .container {
    position: relative;
    width: 100%;
    min-height: 200vh;

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


/* =========================================================
   02.1.07 — HERO WRAPPER
   ========================================================= */

.hero-wrapper {
    position: relative;

    width: min(1800px, 100%);
    min-height: 190vh;

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

    transform-style: preserve-3d;
}


/* =========================================================
   02.1.08 — ORBITAL MASTER SYSTEM
   ========================================================= */

.ars-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(88vw, 1500px);
    height: min(88vw, 1500px);

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

    transform-style: preserve-3d;

    z-index: 8;

    pointer-events: none;
}


/* =========================================================
   02.1.09 — MASTER ENERGY FIELD
   ========================================================= */

.ars-orbit::before {
    content: "";
    position: absolute;

    inset: 18%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,255,.09),
            rgba(0,174,255,.025) 28%,
            transparent 67%
        );

    filter: blur(45px);

    animation:
        coreAtmosphere 7s ease-in-out infinite alternate;
}


/* =========================================================
   02.1.10 — MASTER ORBITAL FIELD
   ========================================================= */

.ars-orbit::after {
    content: "";

    position: absolute;

    inset: 3%;

    border-radius: 50%;

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

    box-shadow:
        0 0 80px rgba(0,174,255,.045),
        inset 0 0 100px rgba(255,255,255,.018);

    transform:
        rotateX(64deg)
        rotateZ(12deg);

    animation:
        masterOrbitSpin 42s linear infinite;

    pointer-events: none;
}


/* =========================================================
   02.1.11 — CENTRAL CORE
   ========================================================= */

.orbit-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: clamp(180px, 15vw, 300px);
    height: clamp(180px, 15vw, 300px);

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

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

    border-radius: 50%;

    z-index: 30;

    pointer-events: auto;

    cursor: pointer;

    transform-style: preserve-3d;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        filter .8s ease;
}


/* =========================================================
   02.1.12 — CORE IMAGE
   ========================================================= */

.orbit-core img {
    position: relative;

    width: 72%;
    height: 72%;

    object-fit: contain;

    z-index: 8;

    border-radius: 50%;

    filter:
        drop-shadow(0 0 14px rgba(255,255,255,.15))
        drop-shadow(0 0 35px rgba(212,160,65,.25));

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter 1s ease;
}


/* =========================================================
   02.1.13 — CORE HOVER
   ========================================================= */

.orbit-core:hover {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    filter:
        drop-shadow(0 0 25px rgba(0,174,255,.35));
}

.orbit-core:hover img {
    transform: scale(1.06);

    filter:
        drop-shadow(0 0 18px rgba(255,255,255,.25))
        drop-shadow(0 0 55px rgba(212,160,65,.5))
        drop-shadow(0 0 80px rgba(0,174,255,.25));
}


/* =========================================================
   02.1.14 — CORE ENERGY RINGS
   ========================================================= */

.orbit-core-energy {
    position: absolute;
    inset: -35%;

    border-radius: 50%;

    pointer-events: none;

    transform-style: preserve-3d;
}


.core-energy-ring {
    position: absolute;

    inset: 10%;

    border-radius: 50%;

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

    box-shadow:
        0 0 20px rgba(255,255,255,.06),
        0 0 45px rgba(0,174,255,.08);

    animation:
        coreRingRotate 18s linear infinite;
}


.core-ring-02 {
    inset: 20%;

    border-color:
        rgba(212,160,65,.25);

    animation-duration: 13s;
    animation-direction: reverse;
}


.core-ring-03 {
    inset: 30%;

    border-color:
        rgba(0,174,255,.35);

    animation-duration: 9s;
}


.core-ring-04 {
    inset: 40%;

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

    animation-duration: 6s;
}


/* =========================================================
   02.1.15 — CORE HALO
   ========================================================= */

.core-energy-halo {
    position: absolute;

    inset: -15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.07),
            rgba(212,160,65,.08) 22%,
            rgba(0,174,255,.045) 38%,
            transparent 70%
        );

    filter: blur(16px);

    animation:
        coreHaloPulse 4.5s ease-in-out infinite;
}


/* =========================================================
   02.1.16 — CORE PULSES
   ========================================================= */

.core-energy-pulse {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 12px;
    height: 12px;

    margin: -6px;

    border-radius: 50%;

    background: var(--ars-electric-blue);

    box-shadow:
        0 0 8px var(--ars-electric-blue),
        0 0 22px var(--ars-electric-blue),
        0 0 50px rgba(0,174,255,.65);

    animation:
        corePulse 3s ease-out infinite;
}

.pulse-02 {
    animation-delay: 1s;
}

.pulse-03 {
    animation-delay: 2s;
}


/* =========================================================
   02.1.17 — INNER ORBIT
   ========================================================= */

.orbit-inner {
    position: absolute;

    inset: 14%;

    border-radius: 50%;

    border:
        1px solid rgba(212,160,65,.18);

    transform-style: preserve-3d;

    animation:
        innerOrbitRotation 45s linear infinite;

    box-shadow:
        0 0 50px rgba(212,160,65,.025),
        inset 0 0 50px rgba(0,174,255,.025);
}


/* =========================================================
   02.1.18 — OUTER ORBIT
   ========================================================= */

.orbit-outer {
    position: absolute;

    inset: 0;

    border-radius: 50%;

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

    transform-style: preserve-3d;

    animation:
        outerOrbitRotation 75s linear infinite;

    box-shadow:
        0 0 90px rgba(0,174,255,.025),
        inset 0 0 100px rgba(212,160,65,.02);
}


/* =========================================================
   02.1.19 — ORBIT ITEM
   ========================================================= */

.orbit-item {
    position: absolute;

    width: clamp(92px, 7vw, 145px);
    height: clamp(92px, 7vw, 145px);

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

    z-index: 20;

    pointer-events: auto;

    transform-style: preserve-3d;

    cursor: pointer;

    transition:
        transform .75s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}


/* =========================================================
   02.1.20 — ORBIT LINK
   ========================================================= */

.orbit-link {
    position: absolute;

    inset: 0;

    display: flex;

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

    border-radius: 50%;

    text-decoration: none;

    z-index: 10;

    transform-style: preserve-3d;
}


/* =========================================================
   02.1.21 — NODE IMAGE
   ========================================================= */

.orbit-link img {
    position: relative;

    width: 72%;
    height: 72%;

    object-fit: contain;

    z-index: 10;

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.15))
        drop-shadow(0 0 22px rgba(0,174,255,.12));

    transition:
        transform .65s cubic-bezier(.16,1,.3,1),
        filter .65s ease;
}


/* =========================================================
   02.1.22 — NODE HOVER
   ========================================================= */

.orbit-item:hover {
    transform:
        translate(-50%, -50%)
        scale(1.18)
        translateZ(50px);

    z-index: 100;
}

.orbit-item:hover .orbit-link img {
    transform: scale(1.12);

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.3))
        drop-shadow(0 0 28px rgba(0,174,255,.55))
        drop-shadow(0 0 55px rgba(212,160,65,.22));
}


/* =========================================================
   02.1.23 — NODE ENERGY SYSTEM
   ========================================================= */

.orbit-node-energy {
    position: absolute;

    inset: -30%;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

    transform-style: preserve-3d;
}


/* =========================================================
   02.1.24 — NODE HALO
   ========================================================= */

.node-energy-halo {
    position: absolute;

    inset: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,255,.20),
            rgba(0,174,255,.08) 28%,
            rgba(212,160,65,.035) 45%,
            transparent 72%
        );

    filter: blur(12px);

    opacity: .7;

    animation:
        nodeHaloPulse 3.8s ease-in-out infinite;
}


/* =========================================================
   02.1.25 — NODE ENERGY RINGS
   ========================================================= */

.node-energy-ring {
    position: absolute;

    inset: 20%;

    border-radius: 50%;

    border:
        1px solid rgba(0,174,255,.22);

    box-shadow:
        0 0 15px rgba(0,174,255,.08);

    animation:
        nodeRingRotation 8s linear infinite;
}


.node-ring-02 {
    inset: 30%;

    border-color:
        rgba(212,160,65,.20);

    animation-duration: 11s;
    animation-direction: reverse;
}


.node-ring-03 {
    inset: 40%;

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

    animation-duration: 6s;
}


/* =========================================================
   02.1.26 — NODE PULSE
   ========================================================= */

.node-energy-pulse {
    position: absolute;

    inset: 42%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.8),
            rgba(0,174,255,.55) 25%,
            transparent 70%
        );

    filter: blur(2px);

    animation:
        nodePulse 2.8s ease-in-out infinite;
}


/* =========================================================
   02.1.27 — NODE SPARKS
   ========================================================= */

.node-energy-spark {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--ars-electric-blue);

    box-shadow:
        0 0 8px var(--ars-electric-blue),
        0 0 20px var(--ars-electric-blue);

    animation:
        nodeSparkOrbit 4s linear infinite;
}

.spark-01 {
    top: 8%;
    left: 50%;
}

.spark-02 {
    top: 50%;
    right: 8%;

    animation-delay: 1.2s;
}

.spark-03 {
    bottom: 8%;
    left: 50%;

    animation-delay: 2.2s;
}


/* =========================================================
   02.1.28 — ACTIVE NODE
   ========================================================= */

.orbit-item.is-active {
    transform:
        translate(-50%, -50%)
        scale(1.22)
        translateZ(80px);

    z-index: 150;
}


.orbit-item.is-active .orbit-node-energy {
    filter:
        drop-shadow(0 0 18px rgba(0,174,255,.55));
}


.orbit-item.is-active .node-energy-halo {
    opacity: 1;

    transform: scale(1.25);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.22),
            rgba(0,174,255,.20) 25%,
            rgba(212,160,65,.12) 45%,
            transparent 72%
        );
}


/* =========================================================
   02.1.29 — ACTIVE NODE IMAGE
   ========================================================= */

.orbit-item.is-active .orbit-link img {
    transform: scale(1.14);

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.5))
        drop-shadow(0 0 35px rgba(0,174,255,.85))
        drop-shadow(0 0 70px rgba(212,160,65,.35));
}


/* =========================================================
   02.1.30 — ENERGY FADING
   ========================================================= */

.orbit-item.energy-fading .orbit-node-energy {
    animation:
        energyDecay .65s ease-out;
}


/* =========================================================
   02.1.31 — CORE REACTION
   ========================================================= */

.orbit-core.core-reacting {
    transform:
        translate(-50%, -50%)
        scale(1.045);
}


.orbit-core.core-reacting .core-energy-halo {
    animation:
        coreReaction 1.2s ease-out;
}


/* =========================================================
   02.1.32 — CORE SELECTED
   ========================================================= */

.orbit-core.core-selected {
    transform:
        translate(-50%, -50%)
        scale(1.1);
}


.orbit-core.core-selected .core-energy-ring {
    border-color:
        rgba(0,174,255,.55);

    box-shadow:
        0 0 25px rgba(0,174,255,.2),
        0 0 70px rgba(0,174,255,.15);
}


/* =========================================================
   02.1.33 — KEYFRAMES
   ========================================================= */

@keyframes heroAtmosphere {

    from {
        transform: scale(1) translate3d(0,0,0);
    }

    to {
        transform: scale(1.08) translate3d(2%, -1%, 0);
    }

}


@keyframes atmosphereDrift {

    from {
        transform: rotate(0deg) scale(1);
    }

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

}


@keyframes starDrift {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-80px,50px,0);
    }

}


@keyframes starDriftReverse {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(60px,-80px,0);
    }

}


@keyframes coreAtmosphere {

    from {
        transform: scale(.94);
        opacity: .55;
    }

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

}


@keyframes masterOrbitSpin {

    from {
        transform:
            rotateX(64deg)
            rotateZ(12deg);
    }

    to {
        transform:
            rotateX(64deg)
            rotateZ(372deg);
    }

}


@keyframes innerOrbitRotation {

    from {
        transform:
            rotateX(62deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(62deg)
            rotateZ(360deg);
    }

}


@keyframes outerOrbitRotation {

    from {
        transform:
            rotateX(67deg)
            rotateZ(360deg);
    }

    to {
        transform:
            rotateX(67deg)
            rotateZ(0deg);
    }

}


@keyframes coreRingRotate {

    from {
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }

}


@keyframes coreHaloPulse {

    0%,100% {
        transform: scale(.92);
        opacity: .55;
    }

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

}


@keyframes corePulse {

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

    25% {
        opacity: 1;
    }

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

}


@keyframes nodeHaloPulse {

    0%,100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.12);
        opacity: .95;
    }

}


@keyframes nodeRingRotation {

    from {
        transform:
            rotateX(68deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(68deg)
            rotateZ(360deg);
    }

}


@keyframes nodePulse {

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

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

}


@keyframes nodeSparkOrbit {

    from {
        transform:
            rotate(0deg)
            translateX(35px)
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg)
            translateX(35px)
            rotate(-360deg);
    }

}


@keyframes energyDecay {

    0% {
        filter:
            brightness(1.7)
            drop-shadow(0 0 35px rgba(0,174,255,.6));
    }

    100% {
        filter:
            brightness(1)
            drop-shadow(0 0 0 transparent);
    }

}


@keyframes coreReaction {

    0% {
        transform: scale(.9);
        opacity: .4;
    }

    35% {
        transform: scale(1.25);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: .7;
    }

}


/* =========================================================
   END OF FILE 02.1
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   PREMIUM INTELLIGENCE UNIVERSE
   =========================================================
   STYLE HOME 3

   03 — HERO MASTER ARCHITECTURE
   CINEMATIC ORBITAL ENERGY SYSTEM

   HTML TARGET:

   .hero
      .hero-background
      .hero-stars
      .hero-stars-2
      .container
         .hero-wrapper
            .home-energy-universe
            .ars-orbit
               .orbit-core
               .orbit-inner
                  .orbit-item × 6
               .orbit-outer
                  .orbit-item × 7
            .hero-content

   ========================================================= */


/* =========================================================
   03 — HERO MASTER ARCHITECTURE
   ========================================================= */


/* =========================================================
   03.1 — HERO MASTER SPACE
   ========================================================= */

.hero {

    position: relative;

    min-height:
        200vh;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(
            ellipse at 50% 42%,
            rgba(8,20,38,.96) 0%,
            rgba(5,11,20,.96) 28%,
            rgba(2,5,8,.99) 65%,
            #010203 100%
        );

}


/* =========================================================
   03.2 — HERO BACKGROUND MASTER FIELD
   ========================================================= */

.hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 50% 45%,
            rgba(0,168,255,.08) 0%,
            rgba(0,119,200,.035) 25%,
            transparent 55%
        ),

        radial-gradient(
            ellipse at 50% 48%,
            rgba(201,162,39,.10) 0%,
            rgba(201,162,39,.025) 32%,
            transparent 64%
        ),

        radial-gradient(
            ellipse at 50% 90%,
            rgba(76,32,30,.11),
            transparent 52%
        );

    transform:
        translateZ(0);

}


/* =========================================================
   03.3 — HERO CINEMATIC VIGNETTE
   ========================================================= */

.hero-background::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            ellipse at center,
            transparent 24%,
            rgba(0,0,0,.20) 55%,
            rgba(0,0,0,.72) 100%
        );

    pointer-events: none;

}


/* =========================================================
   03.4 — HERO TOP ATMOSPHERE
   ========================================================= */

.hero-background::before {

    content: "";

    position: absolute;

    top: -15%;

    left: 50%;

    width: 100%;

    height: 55%;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            ellipse,
            rgba(0,168,255,.08),
            transparent 65%
        );

    filter:
        blur(35px);

    opacity:
        .75;

}


/* =========================================================
   03.5 — HERO WRAPPER
   ========================================================= */

.hero-wrapper {

    position: relative;

    width: 100%;

    min-height:
        200vh;

    isolation: isolate;

}


/* =========================================================
   03.6 — MASTER ORBIT STAGE
   ========================================================= */

.ars-orbit {

    position: absolute;

    top: 0;

    left: 50%;

    width: min(
        100vw,
        1900px
    );

    height: 100%;

    transform:
        translateX(-50%);

    z-index: 8;

    pointer-events: none;

}


/* =========================================================
   03.7 — ORBIT STAGE CENTER
   ========================================================= */

.ars-orbit::before {

    content: "";

    position: absolute;

    top: 44%;

    left: 50%;

    width: 2px;

    height: 2px;

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

    background:
        #ffffff;

    border-radius: 50%;

    box-shadow:

        0 0 10px
        rgba(255,255,255,.9),

        0 0 35px
        rgba(201,162,39,.65),

        0 0 75px
        rgba(0,168,255,.45);

    pointer-events: none;

}


/* =========================================================
   03.8 — MASTER ORBIT LIGHT FLOOR
   ========================================================= */

.ars-orbit::after {

    content: "";

    position: absolute;

    top: 44%;

    left: 50%;

    width: min(
        1050px,
        75vw
    );

    height: min(
        1050px,
        75vw
    );

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

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(201,162,39,.065),
            rgba(0,168,255,.025) 38%,
            transparent 70%
        );

    filter:
        blur(25px);

    pointer-events: none;

}


/* =========================================================
   03.9 — ORBIT INNER MASTER
   ========================================================= */

.orbit-inner {

    position: absolute;

    top: 44%;

    left: 50%;

    width:
        clamp(
            590px,
            48vw,
            820px
        );

    height:
        clamp(
            590px,
            48vw,
            820px
        );

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

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   03.10 — INNER ORBIT ENERGY RING 01
   ========================================================= */

.orbit-inner::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(201,162,39,.16);

    box-shadow:

        0 0 30px
        rgba(201,162,39,.06),

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

    animation:

        orbitInnerBreath
        8s ease-in-out infinite;

}


/* =========================================================
   03.11 — INNER ORBIT ENERGY RING 02
   ========================================================= */

.orbit-inner::after {

    content: "";

    position: absolute;

    inset:
        7%;

    border-radius: 50%;

    border:
        1px dashed
        rgba(0,168,255,.13);

    transform:
        rotate(14deg);

    animation:

        orbitInnerSpin
        48s linear infinite;

}


/* =========================================================
   03.12 — OUTER ORBIT MASTER
   ========================================================= */

.orbit-outer {

    position: absolute;

    top: 44%;

    left: 50%;

    width:
        clamp(
            940px,
            76vw,
            1320px
        );

    height:
        clamp(
            940px,
            76vw,
            1320px
        );

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

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   03.13 — OUTER ORBIT RING 01
   ========================================================= */

.orbit-outer::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

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

    box-shadow:

        0 0 50px
        rgba(0,168,255,.04),

        inset 0 0 50px
        rgba(201,162,39,.025);

    animation:

        orbitOuterBreath
        11s ease-in-out infinite;

}


/* =========================================================
   03.14 — OUTER ORBIT RING 02
   ========================================================= */

.orbit-outer::after {

    content: "";

    position: absolute;

    inset:
        5%;

    border-radius: 50%;

    border:
        1px dashed
        rgba(201,162,39,.11);

    transform:
        rotate(-18deg);

    animation:

        orbitOuterSpin
        72s linear infinite reverse;

}


/* =========================================================
   03.15 — ORBIT ITEM MASTER
   ========================================================= */

.orbit-item {

    position: absolute;

    top: 50%;

    left: 50%;

    width:
        clamp(
            88px,
            7vw,
            126px
        );

    height:
        clamp(
            88px,
            7vw,
            126px
        );

    margin:
        calc(
            clamp(
                88px,
                7vw,
                126px
            ) / -2
        );

    z-index:
        20;

    pointer-events:
        auto;

    isolation:
        isolate;

}


/* =========================================================
   03.16 — INNER ORBIT POSITIONING
   ========================================================= */

.orbit-inner .orbit-item {

    --orbit-radius:
        clamp(
            295px,
            24vw,
            410px
        );

    transform:
        rotate(
            calc(
                (var(--orbit-index) - 1)
                * 60deg
            )
        )
        translateY(
            calc(
                var(--orbit-radius) * -1
            )
        )
        rotate(
            calc(
                (var(--orbit-index) - 1)
                * -60deg
            )
        );

}


/* =========================================================
   03.17 — OUTER ORBIT POSITIONING
   ========================================================= */

.orbit-outer .orbit-item {

    --orbit-radius:
        clamp(
            470px,
            38vw,
            650px
        );

    transform:
        rotate(
            calc(
                (var(--orbit-index) - 7)
                * 51.428571deg
            )
        )
        translateY(
            calc(
                var(--orbit-radius) * -1
            )
        )
        rotate(
            calc(
                (var(--orbit-index) - 7)
                * -51.428571deg
            )
        );

}


/* =========================================================
   03.18 — INNER ORBIT ROTATION ENGINE
   ========================================================= */

.orbit-inner {

    animation:
        innerSystemRotation
        90s linear infinite;

}


/* =========================================================
   03.19 — OUTER ORBIT ROTATION ENGINE
   ========================================================= */

.orbit-outer {

    animation:
        outerSystemRotation
        140s linear infinite reverse;

}


/* =========================================================
   03.20 — INNER SYSTEM ROTATION
   ========================================================= */

@keyframes innerSystemRotation {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);

    }

}


/* =========================================================
   03.21 — OUTER SYSTEM ROTATION
   ========================================================= */

@keyframes outerSystemRotation {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);

    }

}


/* =========================================================
   03.22 — INNER BREATH
   ========================================================= */

@keyframes orbitInnerBreath {

    0%,
    100% {

        opacity:
            .35;

        transform:
            scale(1);

    }

    50% {

        opacity:
            .85;

        transform:
            scale(1.015);

    }

}


/* =========================================================
   03.23 — OUTER BREATH
   ========================================================= */

@keyframes orbitOuterBreath {

    0%,
    100% {

        opacity:
            .22;

    }

    50% {

        opacity:
            .65;

    }

}


/* =========================================================
   03.24 — INNER RING SPIN
   ========================================================= */

@keyframes orbitInnerSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   03.25 — OUTER RING SPIN
   ========================================================= */

@keyframes orbitOuterSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   03.26 — ORBIT ITEM ENERGY FIELD
   ========================================================= */

.orbit-item::before {

    content: "";

    position: absolute;

    inset:
        -38%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(0,168,255,.10),
            rgba(0,168,255,.035) 34%,
            transparent 70%
        );

    filter:
        blur(15px);

    opacity:
        .45;

    z-index:
        -3;

    animation:
        nodeAtmosphere
        5s ease-in-out infinite;

}


/* =========================================================
   03.27 — GOLDEN SECONDARY HALO
   ========================================================= */

.orbit-item::after {

    content: "";

    position: absolute;

    inset:
        -22%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(201,162,39,.10),
            transparent 68%
        );

    filter:
        blur(12px);

    opacity:
        .5;

    z-index:
        -2;

}


/* =========================================================
   03.28 — NODE ATMOSPHERE
   ========================================================= */

@keyframes nodeAtmosphere {

    0%,
    100% {

        transform:
            scale(.92);

        opacity:
            .28;

    }

    50% {

        transform:
            scale(1.12);

        opacity:
            .65;

    }

}


/* =========================================================
   03.29 — ORBIT LINK
   ========================================================= */

.orbit-link {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    overflow: visible;

    z-index: 10;

}


/* =========================================================
   03.30 — ORBIT IMAGE
   ========================================================= */

.orbit-link img {

    position: relative;

    width:
        72%;

    height:
        72%;

    object-fit:
        contain;

    z-index:
        10;

    filter:

        drop-shadow(
            0 0 8px
            rgba(255,255,255,.12)
        )

        drop-shadow(
            0 0 18px
            rgba(201,162,39,.10)
        );

    transition:

        transform
        .8s var(--home-ease-premium),

        filter
        .8s var(--home-ease-premium);

}


/* =========================================================
   03.31 — NODE HOVER
   ========================================================= */

.orbit-item:hover {

    z-index:
        80;

}


/* =========================================================
   03.32 — NODE HOVER IMAGE
   ========================================================= */

.orbit-item:hover .orbit-link img {

    transform:
        scale(1.16);

    filter:

        drop-shadow(
            0 0 10px
            rgba(255,255,255,.4)
        )

        drop-shadow(
            0 0 25px
            rgba(0,168,255,.55)
        )

        drop-shadow(
            0 0 45px
            rgba(201,162,39,.28)
        );

}


/* =========================================================
   03.33 — ACTIVE NODE
   ========================================================= */

.orbit-item.is-active {

    z-index:
        100;

}


/* =========================================================
   03.34 — ACTIVE NODE ATMOSPHERE
   ========================================================= */

.orbit-item.is-active::before {

    opacity:
        .95;

    transform:
        scale(1.25);

    background:

        radial-gradient(
            circle,
            rgba(0,168,255,.25),
            rgba(0,168,255,.08) 32%,
            transparent 70%
        );

    filter:
        blur(18px);

}


/* =========================================================
   03.35 — ACTIVE NODE GOLD FIELD
   ========================================================= */

.orbit-item.is-active::after {

    opacity:
        .95;

    transform:
        scale(1.18);

    background:

        radial-gradient(
            circle,
            rgba(201,162,39,.22),
            rgba(201,162,39,.06) 38%,
            transparent 72%
        );

}


/* =========================================================
   03.36 — ACTIVE NODE IMAGE
   ========================================================= */

.orbit-item.is-active .orbit-link img {

    transform:
        scale(1.22);

    filter:

        drop-shadow(
            0 0 12px
            rgba(255,255,255,.7)
        )

        drop-shadow(
            0 0 30px
            rgba(0,168,255,.75)
        )

        drop-shadow(
            0 0 55px
            rgba(201,162,39,.5)
        );

}


/* =========================================================
   03.37 — ENERGY FADING
   ========================================================= */

.orbit-item.energy-fading::before {

    animation:
        nodeEnergyFade
        .65s var(--home-ease-premium);

}


@keyframes nodeEnergyFade {

    from {

        opacity:
            1;

        transform:
            scale(1.28);

    }

    to {

        opacity:
            .25;

        transform:
            scale(.95);

    }

}


/* =========================================================
   03.38 — ORBITAL DEPTH DIFFERENCE
   ========================================================= */

.orbit-inner .orbit-item:nth-child(odd) {

    filter:
        brightness(.96);

}


.orbit-inner .orbit-item:nth-child(even) {

    filter:
        brightness(1.04);

}


.orbit-outer .orbit-item:nth-child(odd) {

    filter:
        brightness(.82);

}


.orbit-outer .orbit-item:nth-child(even) {

    filter:
        brightness(.94);

}


/* =========================================================
   03.39 — ORBIT CORE SPACE
   ========================================================= */

.orbit-core {

    position: absolute;

    top: 44%;

    left: 50%;

    width:
        clamp(
            210px,
            17vw,
            300px
        );

    height:
        clamp(
            210px,
            17vw,
            300px
        );

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

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    z-index:
        120;

    pointer-events:
        auto;

    isolation:
        isolate;

}


/* =========================================================
   03.40 — CORE IMAGE
   ========================================================= */

.orbit-core > img {

    position:
        relative;

    width:
        58%;

    height:
        58%;

    object-fit:
        contain;

    z-index:
        20;

    border-radius:
        50%;

    filter:

        drop-shadow(
            0 0 15px
            rgba(255,255,255,.28)
        )

        drop-shadow(
            0 0 38px
            rgba(201,162,39,.48)
        )

        drop-shadow(
            0 0 65px
            rgba(0,168,255,.22)
        );

    transition:

        transform
        1s var(--home-ease-cinematic),

        filter
        1s var(--home-ease-cinematic);

}


/* =========================================================
   03.41 — CORE ENERGY RING SYSTEM
   ========================================================= */

.orbit-core-energy {

    position:
        absolute;

    inset:
        -15%;

    z-index:
        5;

    pointer-events:
        none;

}


/* =========================================================
   03.42 — CORE RING BASE
   ========================================================= */

.core-energy-ring {

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

    border:
        1px solid
        rgba(201,162,39,.30);

    box-shadow:

        0 0 25px
        rgba(201,162,39,.10),

        inset 0 0 25px
        rgba(0,168,255,.05);

}


/* =========================================================
   03.43 — CORE RING 01
   ========================================================= */

.core-ring-01 {

    transform:
        rotateX(68deg);

    animation:
        coreRing01
        18s linear infinite;

}


/* =========================================================
   03.44 — CORE RING 02
   ========================================================= */

.core-ring-02 {

    transform:
        rotateY(68deg);

    border-color:
        rgba(0,168,255,.32);

    animation:
        coreRing02
        13s linear infinite reverse;

}


/* =========================================================
   03.45 — CORE RING 03
   ========================================================= */

.core-ring-03 {

    inset:
        8%;

    transform:
        rotateX(72deg)
        rotateY(25deg);

    border-style:
        dashed;

    border-color:
        rgba(236,217,138,.30);

    animation:
        coreRing03
        22s linear infinite;

}


/* =========================================================
   03.46 — CORE RING 04
   ========================================================= */

.core-ring-04 {

    inset:
        18%;

    border-color:
        rgba(53,195,255,.42);

    box-shadow:

        0 0 20px
        rgba(0,168,255,.18);

    animation:
        coreRing04
        9s linear infinite reverse;

}


/* =========================================================
   03.47 — CORE HALO
   ========================================================= */

.core-energy-halo {

    position:
        absolute;

    inset:
        -18%;

    border-radius:
        50%;

    background:

        var(--home-master-energy);

    filter:
        blur(20px);

    opacity:
        .85;

    animation:
        coreHaloPulse
        5s ease-in-out infinite;

}


/* =========================================================
   03.48 — CORE PULSE
   ========================================================= */

.core-energy-pulse {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        18px;

    height:
        18px;

    margin:
        -9px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:

        0 0 12px
        rgba(255,255,255,.95),

        0 0 35px
        rgba(236,217,138,.85),

        0 0 70px
        rgba(0,168,255,.55);

}


/* =========================================================
   03.49 — CORE PULSE 01
   ========================================================= */

.pulse-01 {

    animation:
        corePulse
        2.8s ease-out infinite;

}


/* =========================================================
   03.50 — CORE PULSE 02
   ========================================================= */

.pulse-02 {

    animation:
        corePulse
        2.8s ease-out
        1s infinite;

}


/* =========================================================
   03.51 — CORE PULSE 03
   ========================================================= */

.pulse-03 {

    animation:
        corePulse
        2.8s ease-out
        2s infinite;

}


/* =========================================================
   03.52 — CORE REACTING
   ========================================================= */

.orbit-core.core-reacting
.orbit-core-energy {

    filter:
        brightness(1.22);

}


/* =========================================================
   03.53 — CORE HOVER
   ========================================================= */

.orbit-core.core-hover {

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

}


/* =========================================================
   03.54 — CORE HOVER IMAGE
   ========================================================= */

.orbit-core.core-hover > img {

    transform:
        scale(1.08);

    filter:

        drop-shadow(
            0 0 18px
            rgba(255,255,255,.8)
        )

        drop-shadow(
            0 0 42px
            rgba(201,162,39,.7)
        )

        drop-shadow(
            0 0 85px
            rgba(0,168,255,.55)
        );

}


/* =========================================================
   03.55 — CORE SELECTED
   ========================================================= */

.orbit-core.core-selected {

    filter:
        brightness(1.12);

}


/* =========================================================
   03.56 — CORE RING ANIMATION 01
   ========================================================= */

@keyframes coreRing01 {

    from {

        transform:
            rotateX(68deg)
            rotateZ(0deg);

    }

    to {

        transform:
            rotateX(68deg)
            rotateZ(360deg);

    }

}


/* =========================================================
   03.57 — CORE RING ANIMATION 02
   ========================================================= */

@keyframes coreRing02 {

    from {

        transform:
            rotateY(68deg)
            rotateZ(360deg);

    }

    to {

        transform:
            rotateY(68deg)
            rotateZ(0deg);

    }

}


/* =========================================================
   03.58 — CORE RING ANIMATION 03
   ========================================================= */

@keyframes coreRing03 {

    from {

        transform:
            rotateX(72deg)
            rotateY(25deg)
            rotateZ(0deg);

    }

    to {

        transform:
            rotateX(72deg)
            rotateY(25deg)
            rotateZ(360deg);

    }

}


/* =========================================================
   03.59 — CORE RING ANIMATION 04
   ========================================================= */

@keyframes coreRing04 {

    from {

        transform:
            rotateZ(0deg)
            scale(.92);

    }

    50% {

        transform:
            rotateZ(180deg)
            scale(1.06);

    }

    to {

        transform:
            rotateZ(360deg)
            scale(.92);

    }

}


/* =========================================================
   03.60 — CORE HALO PULSE
   ========================================================= */

@keyframes coreHaloPulse {

    0%,
    100% {

        transform:
            scale(.88);

        opacity:
            .45;

    }

    50% {

        transform:
            scale(1.16);

        opacity:
            .95;

    }

}


/* =========================================================
   03.61 — CORE PULSE ANIMATION
   ========================================================= */

@keyframes corePulse {

    0% {

        transform:
            scale(.25);

        opacity:
            .9;

    }

    70% {

        transform:
            scale(5);

        opacity:
            0;

    }

    100% {

        transform:
            scale(5);

        opacity:
            0;

    }

}


/* =========================================================
   03.62 — MOBILE ORBIT SYSTEM
   ========================================================= */

@media (max-width: 768px) {

    .ars-orbit {

        width:
            100%;

    }

    .orbit-inner {

        width:
            590px;

        height:
            590px;

    }

    .orbit-outer {

        width:
            880px;

        height:
            880px;

    }

    .orbit-inner .orbit-item {

        --orbit-radius:
            295px;

    }

    .orbit-outer .orbit-item {

        --orbit-radius:
            440px;

    }

    .orbit-core {

        width:
            190px;

        height:
            190px;

    }

}


/* =========================================================
   03.63 — SMALL MOBILE ORBIT
   ========================================================= */

@media (max-width: 480px) {

    .hero {

        min-height:
            1450px;

    }

    .hero-wrapper {

        min-height:
            1450px;

    }

    .orbit-inner {

        width:
            470px;

        height:
            470px;

    }

    .orbit-outer {

        width:
            700px;

        height:
            700px;

    }

    .orbit-inner .orbit-item {

        --orbit-radius:
            235px;

    }

    .orbit-outer .orbit-item {

        --orbit-radius:
            350px;

    }

    .orbit-item {

        width:
            72px;

        height:
            72px;

        margin:
            -36px;

    }

    .orbit-core {

        width:
            155px;

        height:
            155px;

    }

}


/* =========================================================
   03.64 — REDUCED MOTION
   ========================================================= */

.hero.reduced-motion
.orbit-inner,
.hero.reduced-motion
.orbit-outer {

    animation:
        none;

}


.hero.reduced-motion
.core-energy-ring,
.hero.reduced-motion
.core-energy-halo,
.hero.reduced-motion
.core-energy-pulse {

    animation:
        none;

}


/* =========================================================
   03.65 — ORBIT SYSTEM FINAL LOCK
   ========================================================= */

/*
   03 COMPLETE.

   MASTER SYSTEM:

   CENTRAL CORE
        ↓
   INNER ORBIT — 6 NODES
        ↓
   OUTER ORBIT — 7 NODES

   TOTAL:
   1 + 6 + 7 = 14

   ENERGY SYSTEM:

   • Gold Radiation
   • Electric Blue Radiation
   • Deep Navy Atmosphere
   • Bronze Material Glow
   • White Core Light
   • Red / Brown Shadow Depth
   • Multi-layer Rings
   • Multi-speed Rotation
   • Halo Breathing
   • Core Pulse
   • Node Activation
   • Hover Energy
   • Touch Interaction
   • Cinematic Depth

   HERO HEIGHT:

   DESKTOP = 200vh
   MOBILE  = CONTROLLED CINEMATIC HEIGHT

   IMPORTANT:

   Orbital geometry remains independent
   from Hero content.

   NEXT:

   04 — DEEP ENERGY UNIVERSE
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   PREMIUM INTELLIGENCE UNIVERSE
   =========================================================
   04 — DEEP ENERGY UNIVERSE
   CINEMATIC ATMOSPHERE / STARS / RADIATION / DEPTH
   ========================================================= */


/* =========================================================
   04.1 — MASTER ENERGY UNIVERSE
   ========================================================= */

.home-energy-universe {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    overflow:
        hidden;

    isolation:
        isolate;

}


/* =========================================================
   04.2 — MASTER ENERGY ATMOSPHERE
   ========================================================= */

.home-energy-universe::before {

    content:
        "";

    position:
        absolute;

    inset:
        -15%;

    background:

        radial-gradient(
            ellipse at 50% 38%,
            rgba(0,168,255,.075)
            0%,
            rgba(0,108,180,.035)
            24%,
            transparent
            55%
        ),

        radial-gradient(
            ellipse at 48% 45%,
            rgba(201,162,39,.065)
            0%,
            rgba(201,162,39,.025)
            27%,
            transparent
            62%
        ),

        radial-gradient(
            ellipse at 50% 75%,
            rgba(92,42,32,.075)
            0%,
            transparent
            55%
        );

    filter:
        blur(18px);

    opacity:
        .95;

    transform:
        translateZ(0);

    animation:
        universeAtmosphereBreath
        14s ease-in-out infinite;

}


/* =========================================================
   04.3 — MASTER DEEP SPACE VEIL
   ========================================================= */

.home-energy-universe::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            ellipse at center,
            transparent 18%,
            rgba(1,3,7,.08) 42%,
            rgba(0,0,0,.32) 72%,
            rgba(0,0,0,.72) 100%
        );

    opacity:
        .9;

}


/* =========================================================
   04.4 — HERO STAR FIELD 01
   ========================================================= */

.hero-stars {

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

    opacity:
        .72;

    background-image:

        radial-gradient(
            circle at 8% 14%,
            rgba(255,255,255,.72) 0 1px,
            transparent 1.6px
        ),

        radial-gradient(
            circle at 17% 36%,
            rgba(0,168,255,.75) 0 1px,
            transparent 1.8px
        ),

        radial-gradient(
            circle at 26% 18%,
            rgba(255,255,255,.52) 0 1px,
            transparent 1.6px
        ),

        radial-gradient(
            circle at 37% 31%,
            rgba(201,162,39,.58) 0 1px,
            transparent 1.7px
        ),

        radial-gradient(
            circle at 48% 11%,
            rgba(255,255,255,.66) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 61% 23%,
            rgba(0,168,255,.64) 0 1px,
            transparent 1.7px
        ),

        radial-gradient(
            circle at 73% 13%,
            rgba(255,255,255,.55) 0 1px,
            transparent 1.6px
        ),

        radial-gradient(
            circle at 86% 30%,
            rgba(201,162,39,.55) 0 1px,
            transparent 1.7px
        ),

        radial-gradient(
            circle at 94% 17%,
            rgba(255,255,255,.65) 0 1px,
            transparent 1.6px
        ),

        radial-gradient(
            circle at 12% 62%,
            rgba(0,168,255,.42) 0 1px,
            transparent 1.7px
        ),

        radial-gradient(
            circle at 29% 71%,
            rgba(255,255,255,.42) 0 1px,
            transparent 1.6px
        ),

        radial-gradient(
            circle at 79% 67%,
            rgba(0,168,255,.46) 0 1px,
            transparent 1.7px
        ),

        radial-gradient(
            circle at 91% 76%,
            rgba(255,255,255,.42) 0 1px,
            transparent 1.5px
        );

    animation:
        starFieldDrift01
        75s linear infinite;

}


/* =========================================================
   04.5 — HERO STAR FIELD 02
   ========================================================= */

.hero-stars-2 {

    position:
        absolute;

    inset:
        -5%;

    z-index:
        4;

    pointer-events:
        none;

    opacity:
        .52;

    background-image:

        radial-gradient(
            circle at 5% 28%,
            rgba(0,168,255,.65) 0 1.2px,
            transparent 2px
        ),

        radial-gradient(
            circle at 21% 9%,
            rgba(255,255,255,.72) 0 1.2px,
            transparent 2px
        ),

        radial-gradient(
            circle at 34% 52%,
            rgba(201,162,39,.58) 0 1.2px,
            transparent 2px
        ),

        radial-gradient(
            circle at 52% 34%,
            rgba(255,255,255,.66) 0 1.1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 68% 8%,
            rgba(0,168,255,.58) 0 1.2px,
            transparent 2px
        ),

        radial-gradient(
            circle at 82% 42%,
            rgba(255,255,255,.64) 0 1.1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 96% 61%,
            rgba(201,162,39,.52) 0 1.2px,
            transparent 2px
        ),

        radial-gradient(
            circle at 42% 83%,
            rgba(0,168,255,.46) 0 1.1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 73% 82%,
            rgba(255,255,255,.48) 0 1px,
            transparent 2px
        );

    filter:
        blur(.15px);

    animation:
        starFieldDrift02
        120s linear infinite reverse;

}


/* =========================================================
   04.6 — STAR FIELD SOFTENING
   ========================================================= */

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

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            rgba(0,0,0,.88) 48%,
            transparent 100%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            rgba(0,0,0,.88) 48%,
            transparent 100%
        );

}


/* =========================================================
   04.7 — STAR DRIFT 01
   ========================================================= */

@keyframes starFieldDrift01 {

    0% {

        transform:
            translate3d(0,0,0)
            scale(1);

        opacity:
            .58;

    }

    50% {

        transform:
            translate3d(-8px,5px,0)
            scale(1.015);

        opacity:
            .82;

    }

    100% {

        transform:
            translate3d(0,0,0)
            scale(1);

        opacity:
            .58;

    }

}


/* =========================================================
   04.8 — STAR DRIFT 02
   ========================================================= */

@keyframes starFieldDrift02 {

    0% {

        transform:
            translate3d(0,0,0)
            scale(1.02);

        opacity:
            .36;

    }

    50% {

        transform:
            translate3d(10px,-7px,0)
            scale(1);

        opacity:
            .62;

    }

    100% {

        transform:
            translate3d(0,0,0)
            scale(1.02);

        opacity:
            .36;

    }

}


/* =========================================================
   04.9 — ELECTRIC BLUE SIGNATURE FIELD
   ========================================================= */

.home-energy-universe .electric-blue-field {

    position:
        absolute;

    top:
        22%;

    left:
        50%;

    width:
        min(
            1100px,
            90vw
        );

    height:
        700px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(0,168,255,.12)
            0%,
            rgba(0,168,255,.055)
            28%,
            rgba(0,119,200,.018)
            52%,
            transparent
            74%
        );

    filter:
        blur(42px);

    opacity:
        .75;

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

}


/* =========================================================
   04.10 — GOLD ATMOSPHERIC FIELD
   ========================================================= */

.home-energy-universe .gold-energy-field {

    position:
        absolute;

    top:
        28%;

    left:
        50%;

    width:
        min(
            950px,
            82vw
        );

    height:
        620px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(201,162,39,.085),
            rgba(201,162,39,.035) 32%,
            transparent 72%
        );

    filter:
        blur(55px);

    opacity:
        .68;

    animation:
        goldFieldBreath
        12s ease-in-out infinite
        reverse;

}


/* =========================================================
   04.11 — BRONZE LOWER ATMOSPHERE
   ========================================================= */

.home-energy-universe .bronze-energy-field {

    position:
        absolute;

    left:
        50%;

    bottom:
        5%;

    width:
        min(
            1250px,
            100vw
        );

    height:
        620px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(129,76,49,.085),
            rgba(76,40,31,.045) 34%,
            transparent 72%
        );

    filter:
        blur(65px);

    opacity:
        .6;

}


/* =========================================================
   04.12 — DEEP RED SHADOW FIELD
   ========================================================= */

.home-energy-universe .red-shadow-field {

    position:
        absolute;

    left:
        50%;

    bottom:
        -8%;

    width:
        min(
            1050px,
            90vw
        );

    height:
        500px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(82,30,28,.095),
            rgba(52,22,22,.035) 40%,
            transparent 74%
        );

    filter:
        blur(70px);

    opacity:
        .68;

}


/* =========================================================
   04.13 — DEEP NAVY SPATIAL FIELD
   ========================================================= */

.home-energy-universe .deep-navy-field {

    position:
        absolute;

    inset:
        8% 4% 12%;

    background:

        radial-gradient(
            ellipse at center,
            rgba(8,20,38,.13),
            transparent 66%
        );

    opacity:
        .85;

}


/* =========================================================
   04.14 — VOLUMETRIC ENERGY BEAM 01
   ========================================================= */

.home-energy-universe .energy-beam-01 {

    position:
        absolute;

    top:
        8%;

    left:
        50%;

    width:
        260px;

    height:
        105%;

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

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(0,168,255,.025) 20%,
            rgba(0,168,255,.055) 48%,
            rgba(0,168,255,.018) 75%,
            transparent
        );

    filter:
        blur(30px);

    opacity:
        .55;

    transform-origin:
        center;

    animation:
        energyBeam01
        16s ease-in-out infinite;

}


/* =========================================================
   04.15 — VOLUMETRIC ENERGY BEAM 02
   ========================================================= */

.home-energy-universe .energy-beam-02 {

    position:
        absolute;

    top:
        10%;

    left:
        50%;

    width:
        190px;

    height:
        110%;

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

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(201,162,39,.018) 22%,
            rgba(201,162,39,.045) 50%,
            rgba(201,162,39,.012) 78%,
            transparent
        );

    filter:
        blur(34px);

    opacity:
        .48;

    animation:
        energyBeam02
        21s ease-in-out infinite
        reverse;

}


/* =========================================================
   04.16 — ENERGY BEAM 01 ANIMATION
   ========================================================= */

@keyframes energyBeam01 {

    0%,
    100% {

        opacity:
            .28;

        margin-left:
            -20px;

    }

    50% {

        opacity:
            .7;

        margin-left:
            20px;

    }

}


/* =========================================================
   04.17 — ENERGY BEAM 02 ANIMATION
   ========================================================= */

@keyframes energyBeam02 {

    0%,
    100% {

        opacity:
            .22;

        margin-left:
            18px;

    }

    50% {

        opacity:
            .58;

        margin-left:
            -18px;

    }

}


/* =========================================================
   04.18 — RADIATION AURA
   ========================================================= */

.home-energy-universe .radiation-aura {

    position:
        absolute;

    top:
        44%;

    left:
        50%;

    width:
        min(
            1200px,
            92vw
        );

    height:
        min(
            1200px,
            92vw
        );

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

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.012)
            0%,
            rgba(0,168,255,.035)
            22%,
            rgba(201,162,39,.028)
            38%,
            transparent 68%
        );

    filter:
        blur(22px);

    opacity:
        .82;

    animation:
        radiationAura
        13s ease-in-out infinite;

}


/* =========================================================
   04.19 — RADIATION AURA ANIMATION
   ========================================================= */

@keyframes radiationAura {

    0%,
    100% {

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

        opacity:
            .48;

    }

    50% {

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

        opacity:
            .88;

    }

}


/* =========================================================
   04.20 — FLOATING PARTICLE FIELD
   ========================================================= */

.home-energy-universe .particle-field {

    position:
        absolute;

    inset:
        0;

    opacity:
        .4;

    background:

        radial-gradient(
            circle at 18% 27%,
            rgba(0,168,255,.38) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 33% 66%,
            rgba(201,162,39,.32) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 66% 31%,
            rgba(255,255,255,.34) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 81% 61%,
            rgba(0,168,255,.3) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 52% 72%,
            rgba(201,162,39,.28) 0 1px,
            transparent 2px
        );

    animation:
        particleFieldFloat
        38s ease-in-out infinite;

}


/* =========================================================
   04.21 — PARTICLE FIELD MOTION
   ========================================================= */

@keyframes particleFieldFloat {

    0%,
    100% {

        transform:
            translate3d(0,0,0);

        opacity:
            .25;

    }

    50% {

        transform:
            translate3d(8px,-12px,0);

        opacity:
            .58;

    }

}


/* =========================================================
   04.22 — CINEMATIC LIGHT FOCUS
   ========================================================= */

.home-energy-universe .cinematic-focus {

    position:
        absolute;

    top:
        44%;

    left:
        50%;

    width:
        min(
            720px,
            72vw
        );

    height:
        min(
            720px,
            72vw
        );

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

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.018)
            0%,
            rgba(0,168,255,.025)
            28%,
            transparent 68%
        );

    filter:
        blur(10px);

    opacity:
        .85;

}


/* =========================================================
   04.23 — EDGE ENERGY LEFT
   ========================================================= */

.home-energy-universe .edge-energy-left {

    position:
        absolute;

    left:
        -12%;

    top:
        18%;

    width:
        38%;

    height:
        68%;

    background:

        radial-gradient(
            ellipse,
            rgba(0,168,255,.045),
            transparent 68%
        );

    filter:
        blur(50px);

    transform:
        rotate(-12deg);

    opacity:
        .62;

}


/* =========================================================
   04.24 — EDGE ENERGY RIGHT
   ========================================================= */

.home-energy-universe .edge-energy-right {

    position:
        absolute;

    right:
        -12%;

    top:
        24%;

    width:
        38%;

    height:
        64%;

    background:

        radial-gradient(
            ellipse,
            rgba(201,162,39,.045),
            transparent 68%
        );

    filter:
        blur(55px);

    transform:
        rotate(13deg);

    opacity:
        .52;

}


/* =========================================================
   04.25 — LOWER ENERGY HORIZON
   ========================================================= */

.home-energy-universe .energy-horizon {

    position:
        absolute;

    left:
        50%;

    bottom:
        3%;

    width:
        min(
            1450px,
            110vw
        );

    height:
        180px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(0,168,255,.055),
            rgba(201,162,39,.025) 38%,
            transparent 72%
        );

    filter:
        blur(35px);

    opacity:
        .72;

}


/* =========================================================
   04.26 — DEEP SPACE GRAIN
   ========================================================= */

.home-energy-universe .space-grain {

    position:
        absolute;

    inset:
        0;

    opacity:
        .045;

    background-image:

        radial-gradient(
            rgba(255,255,255,.8) .45px,
            transparent .55px
        );

    background-size:
        4px 4px;

    mix-blend-mode:
        screen;

    pointer-events:
        none;

}


/* =========================================================
   04.27 — ENERGY DEPTH FADE
   ========================================================= */

.home-energy-universe .depth-fade {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.22),
            transparent 18%,
            transparent 68%,
            rgba(0,0,0,.35) 100%
        );

    pointer-events:
        none;

}


/* =========================================================
   04.28 — TOP CINEMATIC GLOW
   ========================================================= */

.home-energy-universe .top-cinematic-glow {

    position:
        absolute;

    top:
        -12%;

    left:
        50%;

    width:
        min(
            1000px,
            95vw
        );

    height:
        420px;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            ellipse,
            rgba(255,255,255,.025),
            rgba(0,168,255,.045) 25%,
            transparent 70%
        );

    filter:
        blur(40px);

    opacity:
        .82;

}


/* =========================================================
   04.29 — UNIVERSE MASTER BREATH
   ========================================================= */

@keyframes universeAtmosphereBreath {

    0%,
    100% {

        transform:
            scale(.98);

        opacity:
            .72;

    }

    50% {

        transform:
            scale(1.025);

        opacity:
            1;

    }

}


/* =========================================================
   04.30 — ELECTRIC SIGNATURE BREATH
   ========================================================= */

@keyframes electricSignatureBreath {

    0%,
    100% {

        transform:
            translateX(-50%)
            scale(.92);

        opacity:
            .42;

    }

    50% {

        transform:
            translateX(-50%)
            scale(1.06);

        opacity:
            .82;

    }

}


/* =========================================================
   04.31 — GOLD FIELD BREATH
   ========================================================= */

@keyframes goldFieldBreath {

    0%,
    100% {

        transform:
            translateX(-50%)
            scale(.96);

        opacity:
            .42;

    }

    50% {

        transform:
            translateX(-50%)
            scale(1.04);

        opacity:
            .72;

    }

}


/* =========================================================
   04.32 — ENERGY LAYER DEPTH
   ========================================================= */

.home-energy-universe > * {

    transform-style:
        preserve-3d;

}


/* =========================================================
   04.33 — DESKTOP ATMOSPHERIC SCALE
   ========================================================= */

@media (min-width: 1440px) {

    .home-energy-universe .electric-blue-field {

        opacity:
            .82;

    }

    .home-energy-universe .gold-energy-field {

        opacity:
            .72;

    }

    .home-energy-universe .radiation-aura {

        opacity:
            .88;

    }

}


/* =========================================================
   04.34 — TABLET ENERGY CONTROL
   ========================================================= */

@media (max-width: 1024px) {

    .hero-stars {

        opacity:
            .62;

    }

    .hero-stars-2 {

        opacity:
            .38;

    }

    .home-energy-universe .electric-blue-field {

        opacity:
            .58;

    }

    .home-energy-universe .gold-energy-field {

        opacity:
            .48;

    }

    .home-energy-universe .energy-beam-01,
    .home-energy-universe .energy-beam-02 {

        opacity:
            .32;

    }

}


/* =========================================================
   04.35 — MOBILE ENERGY CONTROL
   ========================================================= */

@media (max-width: 768px) {

    .hero-stars {

        opacity:
            .48;

    }

    .hero-stars-2 {

        opacity:
            .28;

    }

    .home-energy-universe .electric-blue-field {

        width:
            820px;

        height:
            560px;

        opacity:
            .48;

        filter:
            blur(38px);

    }

    .home-energy-universe .gold-energy-field {

        width:
            720px;

        height:
            500px;

        opacity:
            .4;

    }

    .home-energy-universe .energy-beam-01,
    .home-energy-universe .energy-beam-02 {

        opacity:
            .18;

    }

    .home-energy-universe .edge-energy-left,
    .home-energy-universe .edge-energy-right {

        opacity:
            .32;

    }

}


/* =========================================================
   04.36 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-stars {

        opacity:
            .38;

    }

    .hero-stars-2 {

        opacity:
            .2;

    }

    .home-energy-universe .electric-blue-field {

        width:
            650px;

        height:
            430px;

        opacity:
            .4;

    }

    .home-energy-universe .gold-energy-field {

        width:
            580px;

        height:
            390px;

        opacity:
            .32;

    }

    .home-energy-universe .radiation-aura {

        width:
            760px;

        height:
            760px;

        opacity:
            .58;

    }

    .home-energy-universe .particle-field {

        opacity:
            .24;

    }

}


/* =========================================================
   04.37 — REDUCED MOTION
   ========================================================= */

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

    .hero-stars,
    .hero-stars-2,
    .home-energy-universe *,
    .home-energy-universe::before {

        animation:
            none !important;

    }

}


/* =========================================================
   04.38 — HERO REDUCED MOTION CLASS
   ========================================================= */

.hero.reduced-motion .hero-stars,
.hero.reduced-motion .hero-stars-2,
.hero.reduced-motion .home-energy-universe *,
.hero.reduced-motion .home-energy-universe::before {

    animation:
        none !important;

}


/* =========================================================
   04.39 — DEEP ENERGY UNIVERSE FINAL LOCK
   ========================================================= */

/*
   04 COMPLETE.
*/


/* =========================================================
   05 — DEEP ATMOSPHERIC INTELLIGENCE FIELD
   ========================================================= */


/* =========================================================
   05.1 — MASTER DEEP SPACE FIELD
   ========================================================= */

.hero {

    background:

        radial-gradient(
            ellipse 90% 65% at 50% 42%,
            rgba(7,24,45,.82) 0%,
            rgba(4,13,25,.88) 27%,
            rgba(2,7,13,.96) 54%,
            rgba(1,3,6,1) 82%,
            #000000 100%
        );

}


/* =========================================================
   05.2 — DEEP NAVY ATMOSPHERE
   ========================================================= */

.hero-background {

    background:

        radial-gradient(
            ellipse 75% 55% at 50% 40%,
            rgba(8,34,62,.34),
            rgba(3,17,31,.18) 42%,
            transparent 72%
        ),

        radial-gradient(
            ellipse 55% 42% at 50% 48%,
            rgba(0,55,92,.18),
            transparent 70%
        ),

        radial-gradient(
            ellipse 70% 40% at 50% 88%,
            rgba(48,20,18,.14),
            transparent 72%
        ),

        radial-gradient(
            ellipse 60% 35% at 20% 65%,
            rgba(67,27,24,.10),
            transparent 72%
        ),

        radial-gradient(
            ellipse 60% 35% at 80% 65%,
            rgba(0,76,116,.10),
            transparent 72%
        );

}


/* =========================================================
   05.3 — ELECTRIC BLUE SIGNATURE FIELD
   ========================================================= */

.hero-background::before {

    background:

        radial-gradient(
            ellipse 42% 28% at 50% 38%,
            rgba(0,174,255,.17),
            rgba(0,132,210,.09) 34%,
            rgba(0,79,130,.035) 58%,
            transparent 78%
        );

    filter:
        blur(42px);

    opacity:
        .82;

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

}


/* =========================================================
   05.4 — GOLDEN RADIATION FIELD
   ========================================================= */

.hero-background::after {

    background:

        radial-gradient(
            ellipse 34% 26% at 50% 44%,
            rgba(255,255,255,.025),
            rgba(201,162,39,.11) 20%,
            rgba(201,162,39,.045) 42%,
            transparent 74%
        ),

        radial-gradient(
            ellipse 70% 50% at 50% 46%,
            transparent 34%,
            rgba(201,162,39,.025) 52%,
            rgba(0,0,0,.24) 78%,
            rgba(0,0,0,.74) 100%
        );

}


/* =========================================================
   05.5 — DEEP ATMOSPHERIC LIGHT
   ========================================================= */

.hero-wrapper {

    background:

        radial-gradient(
            ellipse 58% 42% at 50% 42%,
            rgba(0,168,255,.025),
            transparent 70%
        );

}


/* =========================================================
   05.6 — AMBIENT ENERGY FIELD
   ========================================================= */

.hero-wrapper::before {

    content:
        "";

    position:
        absolute;

    inset:
        -10%;

    z-index:
        1;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse 38% 22% at 50% 32%,
            rgba(0,168,255,.055),
            transparent 72%
        ),

        radial-gradient(
            ellipse 28% 20% at 28% 54%,
            rgba(201,162,39,.035),
            transparent 72%
        ),

        radial-gradient(
            ellipse 28% 20% at 72% 58%,
            rgba(0,168,255,.035),
            transparent 72%
        );

    filter:
        blur(28px);

    opacity:
        .9;

    animation:
        ambientUniverseBreath
        13s ease-in-out infinite;

}


/* =========================================================
   05.7 — AMBIENT ENERGY SECONDARY FIELD
   ========================================================= */

.hero-wrapper::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 22%,
            rgba(0,0,0,.025) 42%,
            rgba(0,0,0,.18) 68%,
            rgba(0,0,0,.68) 100%
        );

}


/* =========================================================
   05.8 — CINEMATIC BLUE HORIZON
   ========================================================= */

.hero {

    --deep-blue-energy:
        rgba(0,168,255,.16);

    --deep-blue-soft:
        rgba(0,168,255,.055);

    --deep-gold-energy:
        rgba(201,162,39,.12);

    --deep-bronze-energy:
        rgba(137,91,54,.075);

    --deep-red-shadow:
        rgba(88,28,27,.09);

    --deep-brown-shadow:
        rgba(64,38,27,.10);

}


/* =========================================================
   05.9 — UPPER ENERGY HORIZON
   ========================================================= */

.hero-wrapper {

    box-shadow:

        inset 0 18vh 90px
        rgba(0,168,255,.018),

        inset 0 -24vh 120px
        rgba(201,162,39,.018);

}


/* =========================================================
   05.10 — DEEP BLUE RADIATION
   ========================================================= */

.hero-background {

    animation:
        universeFieldDrift
        24s ease-in-out infinite;

}


/* =========================================================
   05.11 — RED SHADOW RADIATION
   ========================================================= */

.hero-background {

    background-image:

        radial-gradient(
            ellipse 48% 30% at 18% 72%,
            rgba(83,25,25,.085),
            transparent 72%
        ),

        radial-gradient(
            ellipse 42% 28% at 82% 78%,
            rgba(68,29,22,.075),
            transparent 72%
        ),

        radial-gradient(
            ellipse 70% 40% at 50% 96%,
            rgba(70,28,24,.10),
            transparent 74%
        );

}


/* =========================================================
   05.12 — MATTE BRONZE ATMOSPHERE
   ========================================================= */

.hero-wrapper {

    background-image:

        radial-gradient(
            ellipse 38% 25% at 50% 67%,
            rgba(137,91,54,.035),
            transparent 72%
        ),

        radial-gradient(
            ellipse 25% 18% at 35% 76%,
            rgba(116,73,43,.025),
            transparent 70%
        ),

        radial-gradient(
            ellipse 25% 18% at 65% 76%,
            rgba(116,73,43,.025),
            transparent 70%
        );

}


/* =========================================================
   05.13 — BROWN DEPTH FIELD
   ========================================================= */

.hero-wrapper {

    box-shadow:

        inset 0 -30vh 180px
        rgba(55,28,22,.045),

        inset 0 30vh 150px
        rgba(0,45,70,.025);

}


/* =========================================================
   05.14 — LOWER ENERGY RESERVOIR
   ========================================================= */

.hero-wrapper {

    isolation:
        isolate;

}


/* =========================================================
   05.15 — DESKTOP ATMOSPHERE
   ========================================================= */

@media (min-width: 1200px) {

    .hero-background {

        background-size:
            100% 100%;

    }

}


/* =========================================================
   05.16 — TABLET ATMOSPHERE
   ========================================================= */

@media (max-width: 1199px) {

    .hero-background::before {

        filter:
            blur(32px);

    }

    .hero-wrapper::before {

        filter:
            blur(22px);

    }

}


/* =========================================================
   05.17 — MOBILE ENERGY CONTROL
   ========================================================= */

@media (max-width: 768px) {

    .hero {

        box-shadow:

            inset 0 0 100px
            rgba(0,0,0,.68),

            inset 0 0 220px
            rgba(0,0,0,.28);

    }

    .hero-background::before {

        filter:
            blur(28px);

        opacity:
            .62;

    }

    .hero-wrapper::before {

        opacity:
            .62;

    }

}


/* =========================================================
   05.18 — SMALL MOBILE ENERGY CONTROL
   ========================================================= */

@media (max-width: 480px) {

    .hero-background::before {

        opacity:
            .48;

    }

    .hero-wrapper::before {

        opacity:
            .42;

    }

    .hero {

        box-shadow:

            inset 0 0 70px
            rgba(0,0,0,.72),

            inset 0 0 150px
            rgba(0,0,0,.32);

    }

}


/* =========================================================
   05.19 — REDUCED MOTION
   ========================================================= */

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

    .hero-background,
    .hero-background::before,
    .hero-wrapper::before {

        animation:
            none !important;

    }

}


/* =========================================================
   05.20 — REDUCED MOTION CLASS
   ========================================================= */

.hero.reduced-motion .hero-background,
.hero.reduced-motion .hero-background::before,
.hero.reduced-motion .hero-wrapper::before {

    animation:
        none !important;

}


/* =========================================================
   05.21 — ENERGY UNIVERSE FINAL BALANCE
   ========================================================= */

.hero-background {

    opacity:
        .98;

}


/* =========================================================
   05.22 — FINAL DEPTH LOCK
   ========================================================= */

.hero {

    backface-visibility:
        hidden;

    transform:
        translateZ(0);

}


/* =========================================================
   05.23 — GPU COMPOSITING
   ========================================================= */

.hero-background,
.hero-wrapper::before,
.hero-wrapper::after {

    will-change:
        opacity,
        transform;

}


/* =========================================================
   05.24 — DEEP ENERGY UNIVERSE FINAL LOCK
   ========================================================= */

/*
   05 COMPLETE.

   Deep Energy Universe atmospheric layer only.

   Orbit Geometry:
   Independent.

   Node Geometry:
   Independent.

   Core Geometry:
   Independent.

   Hero Content:
   Independent.
*/


/* =========================================================
   END — ARS HERITAGE GROUP HOME
   ========================================================= */
/* =========================================================
ARS HERITAGE GROUP — HOME
PREMIUM INTELLIGENCE UNIVERSE

STYLE HOME 3

06 — HERO CONTENT / INTELLIGENCE LAYER

RESPONSIBILITY:

• Hero content positioning
• Intelligence typography
• Hero title
• Hero description
• Hero actions
• Content hierarchy
• Cinematic text depth
• Electric Blue signature accents
• Gold heritage accents
• Responsive content architecture

DOES NOT CONTROL:

• Orbit geometry
• Node positioning
• Core geometry
• Deep atmospheric field

========================================================= */

/* =========================================================
06 — HERO CONTENT / INTELLIGENCE
========================================================= */

/* =========================================================
06.1 — HERO CONTENT MASTER
========================================================= */

.hero-content {

position: relative;  

z-index: 40;  

width: min(  
    100%,  
    900px  
);  

margin-inline: auto;  

padding:  

    clamp(160px, 17vh, 260px)  

    24px  

    80px;  

text-align: center;  

isolation: isolate;

}

/* =========================================================
06.2 — HERO CONTENT DEPTH
========================================================= */

.hero-content::before {

content: "";  

position: absolute;  

top: 12%;  

left: 50%;  

width: min(  
    720px,  
    80vw  
);  

height: 520px;  

transform:  
    translateX(-50%);  

background:  

    radial-gradient(  
        ellipse,  
        rgba(0,168,255,.055),  
        rgba(201,162,39,.018) 34%,  
        transparent 72%  
    );  

filter:  
    blur(30px);  

z-index:  
    -2;  

pointer-events:  
    none;  

animation:  
    contentAtmosphere  
    10s ease-in-out infinite;

}

/* =========================================================
06.3 — HERO CONTENT LIGHT VEIL
========================================================= */

.hero-content::after {

content: "";  

position: absolute;  

inset:  
    5% 8% 10%;  

background:  

    radial-gradient(  
        ellipse at center,  
        rgba(255,255,255,.018),  
        transparent 64%  
    );  

filter:  
    blur(18px);  

z-index:  
    -1;  

pointer-events:  
    none;

}

/* =========================================================
06.4 — HERO EYEBROW MASTER
========================================================= */

.hero-content .eyebrow {

display:  
    inline-flex;  

align-items:  
    center;  

justify-content:  
    center;  

gap:  
    12px;  

margin-bottom:  
    24px;  

padding:  
    8px 16px;  

border:  
    1px solid  
    rgba(0,168,255,.22);  

border-radius:  
    999px;  

background:  

    linear-gradient(  
        135deg,  
        rgba(0,168,255,.055),  
        rgba(201,162,39,.025)  
    );  

box-shadow:  

    0 0 24px  
    rgba(0,168,255,.055),  

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

color:  
    rgba(236,245,250,.82);  

font-size:  
    clamp(  
        .62rem,  
        .72vw,  
        .78rem  
    );  

font-weight:  
    600;  

letter-spacing:  
    .24em;  

text-transform:  
    uppercase;  

white-space:  
    nowrap;

}

/* =========================================================
06.5 — EYEBROW SIGNAL
========================================================= */

.hero-content .eyebrow::before {

content: "";  

width:  
    6px;  

height:  
    6px;  

border-radius:  
    50%;  

background:  
    #35c3ff;  

box-shadow:  

    0 0 8px  
    rgba(53,195,255,.9),  

    0 0 18px  
    rgba(0,168,255,.55);  

animation:  
    intelligenceSignal  
    2.8s ease-in-out infinite;

}

/* =========================================================
06.6 — HERO TITLE MASTER
========================================================= */

.hero-content h1 {

position:  
    relative;  

margin:  
    0;  

max-width:  
    980px;  

margin-inline:  
    auto;  

color:  
    #ffffff;  

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

line-height:  
    .88;  

font-weight:  
    700;  

letter-spacing:  
    -.045em;  

text-wrap:  
    balance;  

text-shadow:  

    0 2px 2px  
    rgba(0,0,0,.4),  

    0 0 24px  
    rgba(255,255,255,.055),  

    0 0 70px  
    rgba(0,168,255,.055);  

animation:  
    heroTitleReveal  
    1.4s  
    var(--home-ease-cinematic)  
    both;

}

/* =========================================================
06.7 — TITLE GOLD ACCENT
========================================================= */

.hero-content h1 strong {

color:  
    #ffffff;  

font-weight:  
    700;

}

/* =========================================================
06.8 — TITLE ELECTRIC ACCENT
========================================================= */

.hero-content h1 .electric {

color:  
    #35c3ff;  

text-shadow:  

    0 0 14px  
    rgba(53,195,255,.22),  

    0 0 42px  
    rgba(0,168,255,.13);

}

/* =========================================================
06.9 — TITLE GOLD ACCENT
========================================================= */

.hero-content h1 .gold {

color:  
    #ecd98a;  

text-shadow:  

    0 0 14px  
    rgba(236,217,138,.18),  

    0 0 40px  
    rgba(201,162,39,.12);

}

/* =========================================================
06.10 — TITLE SHINE LINE
========================================================= */

.hero-content h1::after {

content: "";  

position: absolute;  

left:  
    50%;  

bottom:  
    -24px;  

width:  
    min(  
        180px,  
        32vw  
    );  

height:  
    1px;  

transform:  
    translateX(-50%);  

background:  

    linear-gradient(  
        90deg,  
        transparent,  
        rgba(0,168,255,.55),  
        rgba(236,217,138,.8),  
        rgba(0,168,255,.55),  
        transparent  
    );  

box-shadow:  

    0 0 12px  
    rgba(0,168,255,.18);  

opacity:  
    .8;

}

/* =========================================================
06.11 — HERO SUBTITLE
========================================================= */

.hero-content h2 {

margin:  

    52px  

    auto  

    0;  

max-width:  
    720px;  

color:  
    rgba(224,232,238,.84);  

font-size:  
    clamp(  
        1rem,  
        1.5vw,  
        1.35rem  
    );  

line-height:  
    1.65;  

font-weight:  
    400;  

letter-spacing:  
    .025em;  

text-wrap:  
    balance;  

text-shadow:  

    0 2px 16px  
    rgba(0,0,0,.7),  

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

animation:  
    heroSubtitleReveal  
    1.5s  
    .25s  
    var(--home-ease-cinematic)  
    both;

}

/* =========================================================
06.12 — HERO DESCRIPTION
========================================================= */

.hero-content p {

max-width:  
    680px;  

margin:  

    22px  

    auto  

    0;  

color:  
    rgba(188,201,211,.68);  

font-size:  
    clamp(  
        .9rem,  
        1.05vw,  
        1.05rem  
    );  

line-height:  
    1.8;  

font-weight:  
    400;  

letter-spacing:  
    .015em;  

text-wrap:  
    balance;  

animation:  
    heroDescriptionReveal  
    1.5s  
    .45s  
    var(--home-ease-cinematic)  
    both;

}

/* =========================================================
06.13 — HERO ACTION GROUP
========================================================= */

.hero-content .hero-actions {

display:  
    flex;  

align-items:  
    center;  

justify-content:  
    center;  

gap:  
    16px;  

flex-wrap:  
    wrap;  

margin-top:  
    38px;  

animation:  
    heroActionsReveal  
    1.5s  
    .65s  
    var(--home-ease-cinematic)  
    both;

}

/* =========================================================
06.14 — HERO BUTTON MASTER
========================================================= */

.hero-content .hero-actions a {

position:  
    relative;  

display:  
    inline-flex;  

align-items:  
    center;  

justify-content:  
    center;  

min-width:  
    170px;  

min-height:  
    52px;  

padding:  
    0 24px;  

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

border-radius:  
    999px;  

overflow:  
    hidden;  

color:  
    #ffffff;  

background:  

    linear-gradient(  
        135deg,  
        rgba(0,168,255,.09),  
        rgba(201,162,39,.035)  
    );  

box-shadow:  

    0 10px 35px  
    rgba(0,0,0,.22),  

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

font-size:  
    .78rem;  

font-weight:  
    600;  

letter-spacing:  
    .12em;  

text-transform:  
    uppercase;  

text-decoration:  
    none;  

transition:  

    transform  
    .6s var(--home-ease-premium),  

    border-color  
    .6s var(--home-ease-premium),  

    box-shadow  
    .6s var(--home-ease-premium),  

    background  
    .6s var(--home-ease-premium);

}

/* =========================================================
06.15 — BUTTON ENERGY SWEEP
========================================================= */

.hero-content .hero-actions a::before {

content: "";  

position:  
    absolute;  

top:  
    0;  

left:  
    -120%;  

width:  
    80%;  

height:  
    100%;  

background:  

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

transform:  
    skewX(-20deg);  

transition:  
    left  
    .8s  
    var(--home-ease-premium);

}

/* =========================================================
06.16 — BUTTON HOVER
========================================================= */

.hero-content .hero-actions a:hover {

transform:  
    translateY(-4px);  

border-color:  
    rgba(53,195,255,.42);  

background:  

    linear-gradient(  
        135deg,  
        rgba(0,168,255,.14),  
        rgba(201,162,39,.055)  
    );  

box-shadow:  

    0 14px 45px  
    rgba(0,0,0,.32),  

    0 0 28px  
    rgba(0,168,255,.08),  

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

}

.hero-content .hero-actions a:hover::before {

left:  
    140%;

}

/* =========================================================
06.17 — PRIMARY CTA
========================================================= */

.hero-content .hero-actions a.primary {

border-color:  
    rgba(53,195,255,.38);  

background:  

    linear-gradient(  
        135deg,  
        rgba(0,168,255,.16),  
        rgba(0,87,130,.08)  
    );  

box-shadow:  

    0 0 28px  
    rgba(0,168,255,.075),  

    inset 0 0 20px  
    rgba(53,195,255,.025);

}

/* =========================================================
06.18 — PRIMARY CTA HOVER
========================================================= */

.hero-content .hero-actions a.primary:hover {

border-color:  
    rgba(53,195,255,.68);  

box-shadow:  

    0 0 38px  
    rgba(0,168,255,.16),  

    0 14px 48px  
    rgba(0,0,0,.35);

}

/* =========================================================
06.19 — SECONDARY CTA
========================================================= */

.hero-content .hero-actions a.secondary {

border-color:  
    rgba(201,162,39,.22);  

background:  

    linear-gradient(  
        135deg,  
        rgba(201,162,39,.055),  
        rgba(137,91,54,.025)  
    );

}

/* =========================================================
06.20 — SECONDARY CTA HOVER
========================================================= */

.hero-content .hero-actions a.secondary:hover {

border-color:  
    rgba(236,217,138,.5);  

box-shadow:  

    0 0 32px  
    rgba(201,162,39,.10),  

    0 14px 48px  
    rgba(0,0,0,.35);

}

/* =========================================================
06.21 — HERO MICRO INTELLIGENCE LINE
========================================================= */

.hero-content .hero-meta {

display:  
    flex;  

align-items:  
    center;  

justify-content:  
    center;  

gap:  
    18px;  

margin-top:  
    34px;  

color:  
    rgba(184,198,208,.48);  

font-size:  
    .65rem;  

letter-spacing:  
    .18em;  

text-transform:  
    uppercase;

}

/* =========================================================
06.22 — META DIVIDER
========================================================= */

.hero-content .hero-meta span {

display:  
    inline-flex;  

align-items:  
    center;  

gap:  
    18px;

}

.hero-content .hero-meta span + span::before {

content: "";  

width:  
    4px;  

height:  
    4px;  

border-radius:  
    50%;  

background:  
    rgba(53,195,255,.55);  

box-shadow:  
    0 0 8px  
    rgba(0,168,255,.35);

}

/* =========================================================
06.23 — HERO CONTENT FLOAT
========================================================= */

.hero-content {

animation:  
    contentFloat  
    12s ease-in-out infinite;

}

/* =========================================================
06.24 — CONTENT ATMOSPHERE
========================================================= */

@keyframes contentAtmosphere {

0%,  
100% {  

    opacity:  
        .45;  

    transform:  
        translateX(-50%)  
        scale(.94);  

}  

50% {  

    opacity:  
        .85;  

    transform:  
        translateX(-50%)  
        scale(1.05);  

}

}

/* =========================================================
06.25 — INTELLIGENCE SIGNAL
========================================================= */

@keyframes intelligenceSignal {

0%,  
100% {  

    opacity:  
        .45;  

    transform:  
        scale(.82);  

}  

50% {  

    opacity:  
        1;  

    transform:  
        scale(1.18);  

}

}

/* =========================================================
06.26 — HERO TITLE REVEAL
========================================================= */

@keyframes heroTitleReveal {

from {  

    opacity:  
        0;  

    transform:  
        translateY(28px)  
        scale(.985);  

    filter:  
        blur(10px);  

}  

to {  

    opacity:  
        1;  

    transform:  
        translateY(0)  
        scale(1);  

    filter:  
        blur(0);  

}

}

/* =========================================================
06.27 — HERO SUBTITLE REVEAL
========================================================= */

@keyframes heroSubtitleReveal {

from {  

    opacity:  
        0;  

    transform:  
        translateY(20px);  

    filter:  
        blur(7px);  

}  

to {  

    opacity:  
        1;  

    transform:  
        translateY(0);  

    filter:  
        blur(0);  

}

}

/* =========================================================
06.28 — HERO DESCRIPTION REVEAL
========================================================= */

@keyframes heroDescriptionReveal {

from {  

    opacity:  
        0;  

    transform:  
        translateY(16px);  

}  

to {  

    opacity:  
        1;  

    transform:  
        translateY(0);  

}

}

/* =========================================================
06.29 — HERO ACTIONS REVEAL
========================================================= */

@keyframes heroActionsReveal {

from {  

    opacity:  
        0;  

    transform:  
        translateY(14px);  

}  

to {  

    opacity:  
        1;  

    transform:  
        translateY(0);  

}

}

/* =========================================================
06.30 — CONTENT FLOAT
========================================================= */

@keyframes contentFloat {

0%,  
100% {  

    transform:  
        translateY(0);  

}  

50% {  

    transform:  
        translateY(-4px);  

}

}

/* =========================================================
06.31 — DESKTOP CONTENT POSITION
========================================================= */

@media (min-width: 1200px) {

.hero-content {  

    padding-top:  
        clamp(  
            190px,  
            22vh,  
            330px  
        );  

    padding-bottom:  
        120px;  

}

}

/* =========================================================
06.32 — LARGE SCREEN
========================================================= */

@media (min-width: 1600px) {

.hero-content {  

    width:  
        min(  
            1050px,  
            62vw  
        );  

}  

.hero-content h1 {  

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

}

}

/* =========================================================
06.33 — TABLET
========================================================= */

@media (max-width: 1199px) {

.hero-content {  

    width:  
        min(  
            820px,  
            92vw  
        );  

    padding-top:  
        190px;  

}  

.hero-content h1 {  

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

}

}

/* =========================================================
06.34 — MOBILE CONTENT
========================================================= */

@media (max-width: 768px) {

.hero-content {  

    width:  
        min(  
            92vw,  
            620px  
        );  

    padding:  

        150px  

        18px  

        70px;  

}  

.hero-content .eyebrow {  

    margin-bottom:  
        20px;  

    padding:  
        7px 13px;  

    font-size:  
        .57rem;  

    letter-spacing:  
        .18em;  

}  

.hero-content h1 {  

    font-size:  
        clamp(  
            2.7rem,  
            11vw,  
            4.5rem  
        );  

    line-height:  
        .92;  

    letter-spacing:  
        -.04em;  

}  

.hero-content h2 {  

    margin-top:  
        46px;  

    font-size:  
        1rem;  

    line-height:  
        1.55;  

}  

.hero-content p {  

    font-size:  
        .88rem;  

    line-height:  
        1.7;  

}  

.hero-content .hero-actions {  

    margin-top:  
        30px;  

    gap:  
        10px;  

}  

.hero-content .hero-actions a {  

    min-width:  
        150px;  

    min-height:  
        48px;  

    padding:  
        0 18px;  

    font-size:  
        .68rem;  

}

}

/* =========================================================
06.35 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.hero-content {  

    width:  
        94vw;  

    padding:  

        125px  

        14px  

        60px;  

}  

.hero-content h1 {  

    font-size:  
        clamp(  
            2.25rem,  
            12vw,  
            3.4rem  
        );  

}  

.hero-content h2 {  

    margin-top:  
        42px;  

    font-size:  
        .92rem;  

}  

.hero-content p {  

    font-size:  
        .82rem;  

}  

.hero-content .hero-actions {  

    flex-direction:  
        column;  

    width:  
        100%;  

}  

.hero-content .hero-actions a {  

    width:  
        min(  
            100%,  
            280px  
        );  

}  

.hero-content .hero-meta {  

    flex-wrap:  
        wrap;  

    gap:  
        10px;  

    font-size:  
        .55rem;  

}

}

/* =========================================================
06.36 — TOUCH DEVICE CONTROL
========================================================= */

@media (hover: none) {

.hero-content .hero-actions a:hover {  

    transform:  
        none;  

}

}

/* =========================================================
06.37 — REDUCED MOTION
========================================================= */

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

.hero-content,  
.hero-content::before,  
.hero-content .eyebrow::before,  
.hero-content h1,  
.hero-content h2,  
.hero-content p,  
.hero-content .hero-actions {  

    animation:  
        none !important;  

}

}

/* =========================================================
06.38 — CLASS BASED REDUCED MOTION
========================================================= */

.hero.reduced-motion .hero-content,
.hero.reduced-motion .hero-content::before,
.hero.reduced-motion .hero-content .eyebrow::before,
.hero.reduced-motion .hero-content h1,
.hero.reduced-motion .hero-content h2,
.hero.reduced-motion .hero-content p,
.hero.reduced-motion .hero-content .hero-actions {

animation:  
    none !important;

}

/* =========================================================
06.39 — HERO CONTENT FINAL DEPTH
========================================================= */

.hero-content {

text-rendering:  
    optimizeLegibility;  

-webkit-font-smoothing:  
    antialiased;  

-moz-osx-font-smoothing:  
    grayscale;

}

/* =========================================================
06.40 — HERO CONTENT FINAL LOCK
========================================================= */

/*
06 COMPLETE.

CONTENT SYSTEM:

• Intelligence Eyebrow
• Cinematic H1
• Electric Blue Signature
• Gold Heritage Accent
• Premium Subtitle
• Intelligence Description
• Primary CTA
• Secondary CTA
• Micro Intelligence Metadata
• Cinematic Reveal
• Atmospheric Content Halo
• Depth Typography
• Desktop Scaling
• Tablet Scaling
• Mobile Scaling
• Touch Optimization
• Reduced Motion Safety

ARCHITECTURE LOCK:

03 = ORBIT / 14-NODE SYSTEM
05 = DEEP ENERGY UNIVERSE
06 = HERO CONTENT / INTELLIGENCE

NEXT:

07 — HERO NODE / CARD VISUAL SYSTEM
========================================================= /

/* =========================================================
   ARS HERITAGE GROUP — HOME
   07 — HERO BUTTONS
   =========================================================
   GOLDEN REVIVAL & INTERACTION

   HTML LOCK:
   .hero-buttons
   .btn-primary
   .btn-secondary

   REAL INDEX STRUCTURE:

   <div class="hero-buttons">
       <a href="#ecosystem" class="btn-primary">
           Explore ARS Ecosystem
       </a>

       <a href="ars-philosophy-13-as.html" class="btn-secondary">
           ARS Philosophy
       </a>
   </div>

   =========================================================
   25 LOCKED PRINCIPLES

   01 — Royal Gold is the primary CTA identity.
   02 — Base Gold: #B8893F.
   03 — Light Gold: #F1D08A.
   04 — Gold must feel metallic, not flat yellow.
   05 — Primary CTA must visually dominate the secondary CTA.
   06 — Secondary CTA must remain premium and restrained.
   07 — Gold represents Heritage / Prestige.
   08 — Electric Blue represents Intelligence / Energy.
   09 — Blue may support Gold, never replace it.
   10 — Black / Deep Navy remain the environmental foundation.
   11 — No generic glassmorphism button.
   12 — No excessive neon.
   13 — No cartoon / gaming-style effects.
   14 — No excessive border radius.
   15 — Interaction must feel engineered and precise.
   16 — Hover must produce controlled elevation.
   17 — Hover must enhance the gold surface.
   18 — Interaction must include subtle ARS energy response.
   19 — Press state must feel physical and immediate.
   20 — Focus state must remain accessible and premium.
   21 — Buttons must remain readable on every Hero background.
   22 — Responsive behavior must preserve hierarchy.
   23 — Touch devices must not depend on hover.
   24 — Reduced-motion users must receive a stable version.
   25 — No selector outside the real Hero Button system.

   IMPORTANT:
   HTML modification: FORBIDDEN
   JavaScript modification: FORBIDDEN
   Golden Reveal Script: LOCKED
   Global CSS dependency: FORBIDDEN
   Random decorative effects: FORBIDDEN
   ========================================================= */


/* =========================================================
   07.01 — BUTTON GROUP
   ========================================================= */

.hero-buttons {

    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap:
        16px;

    margin-top:
        clamp(28px, 3vw, 42px);

}


/* =========================================================
   07.02 — BUTTON FOUNDATION
   ========================================================= */

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height:
        52px;

    padding:
        0 27px;

    border:
        1px solid transparent;

    border-radius:
        2px;

    font-family:
        inherit;

    font-size:
        clamp(0.78rem, 0.82vw, 0.88rem);

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.075em;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    overflow:
        hidden;

    isolation:
        isolate;

    transform:
        translate3d(0, 0, 0);

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform 420ms cubic-bezier(.2,.7,.2,1),
        color 350ms ease,
        background 450ms ease,
        border-color 450ms ease,
        box-shadow 500ms ease,
        filter 450ms ease;

}


/* =========================================================
   07.03 — PRIMARY GOLDEN CTA
   ========================================================= */

.hero-buttons .btn-primary {

    color:
        #090b0d;

    border-color:
        rgba(241, 208, 138, 0.68);

    background:

        linear-gradient(
            135deg,
            #9C7134 0%,
            #B8893F 24%,
            #E0B866 52%,
            #F1D08A 70%,
            #B8893F 100%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 248, 224, 0.55),

        inset 0 -1px 0
        rgba(92, 58, 18, 0.45),

        0 7px 22px
        rgba(0, 0, 0, 0.34),

        0 0 20px
        rgba(212, 166, 70, 0.075);

}


/* =========================================================
   07.04 — PRIMARY METALLIC LIGHT
   ========================================================= */

.hero-buttons .btn-primary::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:

        linear-gradient(
            105deg,
            transparent 18%,
            rgba(255, 255, 255, 0.12) 34%,
            rgba(255, 247, 215, 0.30) 48%,
            rgba(255, 255, 255, 0.08) 62%,
            transparent 80%
        );

    transform:
        translateX(-115%);

    transition:
        transform 750ms cubic-bezier(.16,1,.3,1);

}


/* =========================================================
   07.05 — PRIMARY ENERGY EDGE
   ========================================================= */

.hero-buttons .btn-primary::after {

    content:
        "";

    position:
        absolute;

    left:
        12%;

    right:
        12%;

    bottom:
        0;

    height:
        1px;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255, 241, 190, 0.95),
            rgba(0, 174, 255, 0.32),
            rgba(255, 241, 190, 0.95),
            transparent
        );

    opacity:
        0.72;

    box-shadow:
        0 0 10px rgba(241, 208, 138, 0.18);

}


/* =========================================================
   07.06 — SECONDARY CTA
   ========================================================= */

.hero-buttons .btn-secondary {

    color:
        rgba(242, 237, 226, 0.91);

    border-color:
        rgba(212, 166, 70, 0.34);

    background:

        linear-gradient(
            135deg,
            rgba(9, 18, 29, 0.86),
            rgba(4, 9, 16, 0.94)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, 0.045),

        inset 0 0 24px
        rgba(0, 174, 255, 0.018),

        0 7px 22px
        rgba(0, 0, 0, 0.30);

}


/* =========================================================
   07.07 — SECONDARY BLUE INTELLIGENCE TRACE
   ========================================================= */

.hero-buttons .btn-secondary::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        2px;

    height:
        100%;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(0, 174, 255, 0.72),
            rgba(212, 166, 70, 0.60),
            transparent
        );

    opacity:
        0.72;

    box-shadow:
        0 0 10px rgba(0, 174, 255, 0.16);

    transition:
        opacity 450ms ease,
        box-shadow 450ms ease;

}


/* =========================================================
   07.08 — SECONDARY BOTTOM TRACE
   ========================================================= */

.hero-buttons .btn-secondary::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            rgba(0, 174, 255, 0.55),
            rgba(212, 166, 70, 0.28),
            transparent
        );

    opacity:
        0.55;

    transition:
        opacity 450ms ease,
        transform 500ms ease;

}


/* =========================================================
   07.09 — PRIMARY HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .hero-buttons .btn-primary:hover {

        transform:
            translate3d(0, -3px, 0);

        color:
            #050608;

        border-color:
            rgba(255, 229, 159, 0.95);

        background:

            linear-gradient(
                135deg,
                #B8893F 0%,
                #D5A953 24%,
                #F1D08A 50%,
                #FFE7A7 66%,
                #C39446 100%
            );

        box-shadow:

            inset 0 1px 0
            rgba(255, 255, 255, 0.72),

            inset 0 -1px 0
            rgba(80, 49, 13, 0.32),

            0 12px 30px
            rgba(0, 0, 0, 0.42),

            0 0 28px
            rgba(212, 166, 70, 0.17),

            0 0 46px
            rgba(0, 174, 255, 0.045);

    }


    .hero-buttons .btn-primary:hover::before {

        transform:
            translateX(115%);

    }


    .hero-buttons .btn-primary:hover::after {

        opacity:
            1;

        box-shadow:
            0 0 16px rgba(241, 208, 138, 0.30);

    }


/* =========================================================
   07.10 — SECONDARY HOVER
   ========================================================= */

    .hero-buttons .btn-secondary:hover {

        transform:
            translate3d(0, -3px, 0);

        color:
            #F1D08A;

        border-color:
            rgba(212, 166, 70, 0.62);

        background:

            linear-gradient(
                135deg,
                rgba(15, 29, 45, 0.94),
                rgba(4, 10, 18, 0.97)
            );

        box-shadow:

            inset 0 1px 0
            rgba(255, 255, 255, 0.06),

            inset 0 0 28px
            rgba(0, 174, 255, 0.035),

            0 12px 30px
            rgba(0, 0, 0, 0.42),

            0 0 24px
            rgba(0, 174, 255, 0.065);

    }


    .hero-buttons .btn-secondary:hover::before {

        opacity:
            1;

        box-shadow:
            0 0 16px rgba(0, 174, 255, 0.24);

    }


    .hero-buttons .btn-secondary:hover::after {

        opacity:
            1;

        transform:
            scaleX(0.92);

    }

}


/* =========================================================
   07.11 — ACTIVE / PRESS STATE
   ========================================================= */

.hero-buttons .btn-primary:active,
.hero-buttons .btn-secondary:active {

    transform:
        translate3d(0, 1px, 0)
        scale(0.985);

    transition:
        transform 100ms ease;

}


/* =========================================================
   07.12 — KEYBOARD FOCUS
   ========================================================= */

.hero-buttons .btn-primary:focus-visible,
.hero-buttons .btn-secondary:focus-visible {

    outline:
        none;

    border-color:
        rgba(241, 208, 138, 0.92);

    box-shadow:

        0 0 0 2px
        rgba(2, 5, 12, 0.96),

        0 0 0 4px
        rgba(0, 174, 255, 0.42),

        0 0 24px
        rgba(212, 166, 70, 0.14);

}


/* =========================================================
   07.13 — DISABLED SAFETY
   ========================================================= */

.hero-buttons .btn-primary[aria-disabled="true"],
.hero-buttons .btn-secondary[aria-disabled="true"] {

    pointer-events:
        none;

    opacity:
        0.48;

    filter:
        saturate(0.55);

}


/* =========================================================
   07.14 — TABLET
   ========================================================= */

@media (max-width: 980px) {

    .hero-buttons {

        gap:
            14px;

        margin-top:
            32px;

    }


    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        min-height:
            50px;

        padding:
            0 24px;

        font-size:
            0.78rem;

    }

}


/* =========================================================
   07.15 — MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .hero-buttons {

        width:
            100%;

        justify-content:
            center;

        gap:
            12px;

        margin-top:
            28px;

    }


    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        min-height:
            50px;

        padding:
            0 20px;

        font-size:
            0.72rem;

        letter-spacing:
            0.065em;

    }

}


/* =========================================================
   07.16 — SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            min(
                calc(100% - 28px),
                360px
            );

        margin-inline:
            auto;

        gap:
            10px;

    }


    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        width:
            100%;

        min-height:
            50px;

        padding:
            0 18px;

    }

}


/* =========================================================
   07.17 — TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        transition:
            transform 180ms ease,
            background 300ms ease,
            border-color 300ms ease,
            box-shadow 300ms ease;

    }


    .hero-buttons .btn-primary:active {

        box-shadow:

            inset 0 1px 0
            rgba(255, 255, 255, 0.45),

            0 4px 14px
            rgba(0, 0, 0, 0.32);

    }


    .hero-buttons .btn-secondary:active {

        border-color:
            rgba(212, 166, 70, 0.55);

    }

}


/* =========================================================
   07.18 — REDUCED MOTION
   ========================================================= */

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

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary,
    .hero-buttons .btn-primary::before,
    .hero-buttons .btn-primary::after,
    .hero-buttons .btn-secondary::before,
    .hero-buttons .btn-secondary::after {

        transition:
            none !important;

        animation:
            none !important;

    }


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

        transform:
            none;

    }

}


/* =========================================================
   07.19 — PERFORMANCE CONTAINMENT
   ========================================================= */

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {

    contain:
        layout paint;

}


/* =========================================================
   07.20 — END
   ========================================================= */



/ =========================================================
ARS HERITAGE GROUP — HOME

08 — ABOUT ARS SECTION

HTML TARGETS:

.about-ars
.section-header
.section-label
.about-content
.about-text
blockquote

DESIGN LANGUAGE:

Deep Cinematic
Heritage × Intelligence
Gold Prestige
Electric Blue Intelligence
Deep Navy Technology
Black Luxury
Bronze Material
White Precision

RESPONSIBILITY:

• Hero → About transition
• Cinematic depth
• Premium heading hierarchy
• Text atmosphere
• Glass text surface
• Gold quotation treatment
• Electric-blue radiation
• Luxury spacing
• Scroll-reveal foundation

IMPORTANT:

NO HTML MODIFICATION
NO CARD SYSTEM
NO ECOSYSTEM SYSTEM
NO GLOBAL OVERRIDE
========================================================= */

/* =========================================================
08.01 — ABOUT MASTER FOUNDATION
========================================================= */

.about-ars {

position: relative;  

isolation: isolate;  

min-height: 78vh;  

padding:  
    clamp(120px, 13vw, 220px)  
    0  
    clamp(120px, 13vw, 220px);  

overflow: hidden;  

background:  

    radial-gradient(  
        ellipse at 50% 8%,  
        rgba(0, 105, 210, 0.065) 0%,  
        transparent 34%  
    ),  

    radial-gradient(  
        ellipse at 18% 50%,  
        rgba(212, 170, 82, 0.025) 0%,  
        transparent 35%  
    ),  

    linear-gradient(  
        180deg,  
        #02050a 0%,  
        #030914 38%,  
        #02050a 100%  
    );

}

/* =========================================================
08.02 — HERO → ABOUT CINEMATIC TRANSITION
========================================================= */

.about-ars::before {

content: "";  

position: absolute;  

left: 0;  
right: 0;  
top: -140px;  

height: 240px;  

z-index: -1;  

pointer-events: none;  

background:  

    linear-gradient(  
        to bottom,  
        transparent 0%,  
        rgba(0, 95, 190, 0.025) 34%,  
        rgba(0, 80, 170, 0.065) 64%,  
        rgba(2, 5, 10, 0.92) 100%  
    );  

filter: blur(8px);

}

/* =========================================================
08.03 — DEEP ATMOSPHERIC FIELD
========================================================= */

.about-ars::after {

content: "";  

position: absolute;  

inset: 0;  

z-index: -2;  

pointer-events: none;  

background:  

    radial-gradient(  
        circle at 50% 46%,  
        rgba(0, 135, 255, 0.035) 0%,  
        rgba(0, 100, 210, 0.018) 25%,  
        transparent 55%  
    ),  

    radial-gradient(  
        circle at 80% 30%,  
        rgba(212, 170, 82, 0.025) 0%,  
        transparent 28%  
    );

}

/* =========================================================
08.04 — ABOUT INTERNAL ENERGY
========================================================= */

.about-ars .container {

position: relative;  

z-index: 2;

}

/* =========================================================
08.05 — SECTION HEADER
========================================================= */

.about-ars .section-header {

position: relative;  

max-width: 920px;  

margin:  
    0 auto  
    clamp(54px, 6vw, 90px);  

text-align: center;

}

/* =========================================================
08.06 — HEADER ENERGY AURA
========================================================= */

.about-ars .section-header::before {

content: "";  

position: absolute;  

left: 50%;  
top: 52%;  

width: min(760px, 88vw);  
height: 280px;  

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

z-index: -1;  

pointer-events: none;  

background:  

    radial-gradient(  
        ellipse,  
        rgba(0, 125, 255, 0.065) 0%,  
        rgba(0, 90, 190, 0.025) 34%,  
        transparent 70%  
    );  

filter: blur(28px);

}

/* =========================================================
08.07 — SECTION LABEL
========================================================= */

.about-ars .section-label {

position: relative;  

display: inline-flex;  

align-items: center;  

justify-content: center;  

margin-bottom: 22px;  

padding:  
    8px 17px;  

border:  
    1px solid  
    rgba(212, 170, 82, 0.24);  

border-radius: 999px;  

background:  

    linear-gradient(  
        135deg,  
        rgba(255, 255, 255, 0.035),  
        rgba(0, 30, 65, 0.16)  
    );  

color:  
    rgba(221, 183, 102, 0.92);  

font-size:  
    clamp(0.66rem, 0.72vw, 0.78rem);  

font-weight: 600;  

letter-spacing:  
    0.22em;  

text-transform: uppercase;  

box-shadow:  

    0 0 20px  
    rgba(212, 170, 82, 0.035),  

    inset 0 0 12px  
    rgba(0, 120, 255, 0.025);

}

/* =========================================================
08.08 — LABEL ENERGY DOT
========================================================= */

.about-ars .section-label::before {

content: "";  

width: 5px;  
height: 5px;  

margin-right: 9px;  

border-radius: 50%;  

background:  
    rgba(0, 170, 255, 0.95);  

box-shadow:  

    0 0 5px  
    rgba(0, 170, 255, 0.9),  

    0 0 14px  
    rgba(0, 130, 255, 0.4);

}

/* =========================================================
08.09 — PREMIUM ABOUT HEADING
========================================================= */

.about-ars .section-header h2 {

position: relative;  

margin: 0;  

color:  
    rgba(247, 247, 244, 0.96);  

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

line-height:  
    0.98;  

letter-spacing:  
    -0.045em;  

font-weight:  
    500;  

text-wrap: balance;  

text-shadow:  

    0 0 28px  
    rgba(0, 100, 210, 0.075),  

    0 2px 18px  
    rgba(0, 0, 0, 0.7);

}

/* =========================================================
08.10 — HEADING PRECISION LIGHT
========================================================= */

.about-ars .section-header h2::after {

content: "";  

display: block;  

width:  
    clamp(70px, 8vw, 120px);  

height: 1px;  

margin:  
    30px auto 0;  

background:  

    linear-gradient(  
        90deg,  
        transparent,  
        rgba(0, 160, 255, 0.75),  
        rgba(212, 170, 82, 0.8),  
        transparent  
    );  

box-shadow:  

    0 0 12px  
    rgba(0, 140, 255, 0.25);

}

/* =========================================================
08.11 — ABOUT CONTENT LAYOUT
========================================================= */

.about-ars .about-content {

position: relative;  

display: flex;  

justify-content: center;  

width: 100%;  

margin-top:  
    clamp(20px, 4vw, 60px);

}

/* =========================================================
08.12 — TEXT ATMOSPHERE
========================================================= */

.about-ars .about-text {

position: relative;  

width: min(900px, 100%);  

padding:  
    clamp(34px, 5vw, 70px)  
    clamp(28px, 5vw, 74px);  

border:  
    1px solid  
    rgba(100, 145, 185, 0.11);  

border-radius:  
    2px;  

background:  

    linear-gradient(  
        135deg,  
        rgba(255, 255, 255, 0.028),  
        rgba(4, 14, 28, 0.46) 42%,  
        rgba(0, 0, 0, 0.40)  
    );  

backdrop-filter:  
    blur(16px);  

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

box-shadow:  

    0 30px 90px  
    rgba(0, 0, 0, 0.42),  

    inset 0 1px 0  
    rgba(255, 255, 255, 0.035),  

    inset 0 0 45px  
    rgba(0, 70, 140, 0.025);

}

/* =========================================================
08.13 — GLASS TOP REFLECTION
========================================================= */

.about-ars .about-text::before {

content: "";  

position: absolute;  

left: 8%;  
right: 8%;  
top: 0;  

height: 1px;  

background:  

    linear-gradient(  
        90deg,  
        transparent,  
        rgba(255, 255, 255, 0.15),  
        rgba(0, 145, 255, 0.12),  
        transparent  
    );  

opacity: 0.65;

}

/* =========================================================
08.14 — ELECTRIC BLUE SIDE RADIATION
========================================================= */

.about-ars .about-text::after {

content: "";  

position: absolute;  

left: -1px;  
top: 14%;  

width: 2px;  
height: 72%;  

background:  

    linear-gradient(  
        to bottom,  
        transparent,  
        rgba(0, 155, 255, 0.65) 30%,  
        rgba(0, 115, 220, 0.3) 70%,  
        transparent  
    );  

box-shadow:  

    0 0 16px  
    rgba(0, 135, 255, 0.18);  

opacity: 0.65;

}

/* =========================================================
08.15 — PARAGRAPH TYPOGRAPHY
========================================================= */

.about-ars .about-text p {

margin:  
    0 0 26px;  

color:  
    rgba(215, 222, 231, 0.76);  

font-size:  
    clamp(1rem, 1.18vw, 1.18rem);  

line-height:  
    1.95;  

letter-spacing:  
    0.005em;  

font-weight:  
    350;

}

/* =========================================================
08.16 — FIRST PARAGRAPH EMPHASIS
========================================================= */

.about-ars .about-text p:first-child {

color:  
    rgba(235, 238, 241, 0.9);  

font-size:  
    clamp(1.08rem, 1.32vw, 1.3rem);  

line-height:  
    1.85;

}

/* =========================================================
08.17 — LAST PARAGRAPH
========================================================= */

.about-ars .about-text p:last-of-type {

margin-bottom:  
    clamp(28px, 4vw, 42px);  

color:  
    rgba(188, 201, 215, 0.64);

}

/* =========================================================
08.18 — GOLD QUOTATION
========================================================= */

.about-ars .about-text blockquote {

position: relative;  

margin:  
    clamp(34px, 5vw, 60px)  
    0  
    0;  

padding:  
    28px  
    clamp(28px, 4vw, 50px);  

border-left:  
    1px solid  
    rgba(212, 170, 82, 0.65);  

color:  
    rgba(235, 211, 155, 0.96);  

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

line-height:  
    1.35;  

letter-spacing:  
    -0.02em;  

font-weight:  
    450;  

font-style:  
    normal;  

background:  

    linear-gradient(  
        90deg,  
        rgba(212, 170, 82, 0.055),  
        transparent 68%  
    );  

text-shadow:  

    0 0 22px  
    rgba(212, 170, 82, 0.08);

}

/* =========================================================
08.19 — QUOTE GOLD ENERGY
========================================================= */

.about-ars .about-text blockquote::before {

content: "“";  

position: absolute;  

left:  
    clamp(10px, 1.8vw, 24px);  

top:  
    -18px;  

color:  
    rgba(212, 170, 82, 0.32);  

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

font-size:  
    4.5rem;  

line-height: 1;  

text-shadow:  

    0 0 20px  
    rgba(212, 170, 82, 0.18);

}

/* =========================================================
08.20 — QUOTE BLUE MICRO-LINE
========================================================= */

.about-ars .about-text blockquote::after {

content: "";  

position: absolute;  

left: 0;  
bottom: -1px;  

width: 82px;  
height: 1px;  

background:  

    linear-gradient(  
        90deg,  
        rgba(0, 160, 255, 0.65),  
        transparent  
    );  

box-shadow:  

    0 0 10px  
    rgba(0, 145, 255, 0.18);

}

/* =========================================================
08.21 — ABOUT HOVER ATMOSPHERE
========================================================= */

.about-ars .about-text {

transition:  
    transform 700ms cubic-bezier(.2,.75,.2,1),  
    border-color 700ms ease,  
    box-shadow 700ms ease;

}

.about-ars .about-text:hover {

transform:  
    translateY(-4px);  

border-color:  
    rgba(0, 135, 225, 0.18);  

box-shadow:  

    0 38px 105px  
    rgba(0, 0, 0, 0.5),  

    0 0 40px  
    rgba(0, 85, 170, 0.045),  

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

}

/* =========================================================
08.22 — CINEMATIC SCROLL FOUNDATION

آماده برای سیستم 22.
هیچ JS جدیدی اضافه نمی‌کنیم.
========================================================= */

.about-ars .section-header,
.about-ars .about-text {

opacity: 1;  

transform:  
    translate3d(0, 0, 0);

}

/* =========================================================
08.23 — TABLET
========================================================= */

@media (max-width: 1024px) {

.about-ars {  

    min-height: auto;  

    padding:  
        110px 0  
        110px;  

}  

.about-ars .section-header {  

    max-width: 760px;  

}  

.about-ars .about-text {  

    width:  
        min(820px, 100%);  

}

}

/* =========================================================
08.24 — MOBILE
========================================================= */

@media (max-width: 768px) {

.about-ars {  

    padding:  
        90px 0  
        95px;  

}  

.about-ars .section-header {  

    margin-bottom:  
        48px;  

}  

.about-ars .section-label {  

    margin-bottom:  
        18px;  

    letter-spacing:  
        0.16em;  

}  

.about-ars .section-header h2 {  

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

    line-height:  
        1.02;  

    letter-spacing:  
        -0.035em;  

}  

.about-ars .section-header h2::after {  

    margin-top:  
        24px;  

}  

.about-ars .about-content {  

    margin-top:  
        0;  

}  

.about-ars .about-text {  

    padding:  
        30px 24px  
        34px;  

    backdrop-filter:  
        blur(10px);  

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

}  

.about-ars .about-text p {  

    font-size:  
        0.98rem;  

    line-height:  
        1.82;  

    margin-bottom:  
        22px;  

}  

.about-ars .about-text p:first-child {  

    font-size:  
        1.05rem;  

    line-height:  
        1.78;  

}  

.about-ars .about-text blockquote {  

    padding:  
        24px 20px  
        24px 26px;  

    font-size:  
        1.3rem;  

    line-height:  
        1.4;  

}

}

/* =========================================================
08.25 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.about-ars {  

    padding:  
        76px 0  
        82px;  

}  

.about-ars .section-header h2 {  

    font-size:  
        2rem;  

}  

.about-ars .about-text {  

    padding:  
        26px 20px  
        30px;  

}  

.about-ars .about-text blockquote {  

    padding:  
        22px 18px  
        22px 22px;  

    font-size:  
        1.18rem;  

}

}

/* =========================================================
08.26 — REDUCED MOTION
========================================================= */

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

.about-ars .about-text {  

    transition:  
        none;  

}  

.about-ars .about-text:hover {  

    transform:  
        none;  

}

}

/* =========================================================
08.27 — PERFORMANCE SAFETY
========================================================= */

.about-ars,
.about-ars::before,
.about-ars::after,
.about-ars .section-header::before,
.about-ars .about-text,
.about-ars .about-text::before,
.about-ars .about-text::after {

backface-visibility:  
    hidden;  

-webkit-backface-visibility:  
    hidden;

}

/* =========================================================
08 — END
========================================================= */

/* =========================================================
ARS HERITAGE GROUP — HOME
09 — MISSION / VISION / VALUES

PHILOSOPHY / INTELLIGENCE CARD SYSTEM

HTML LOCK:
.mission-vision
.principles-grid
.principle-card

VISUAL DNA:
Gold       = Prestige / Heritage
Deep Navy  = Intelligence / Technology
Black      = Depth / Luxury
Bronze     = Material / Engineering
Electric Blue = ARS Energy Signature
White      = Precision / Core Light

IMPORTANT:
No HTML modification.
No ecosystem-card dependency.
No random decorative effects.
========================================================= */

/* =========================================================
09.01 — MISSION / VISION MASTER SECTION
========================================================= */

.mission-vision {

position: relative;  

isolation: isolate;  

width: 100%;  

padding:  
    clamp(120px, 11vw, 190px)  
    0  
    clamp(130px, 12vw, 210px);  

background:  
    linear-gradient(  
        180deg,  
        rgba(2, 5, 12, 0.96) 0%,  
        rgba(3, 8, 18, 0.98) 38%,  
        rgba(1, 4, 10, 1) 100%  
    );  

overflow: hidden;

}

/* =========================================================
09.02 — ATMOSPHERIC DEPTH
========================================================= */

.mission-vision::before {

content: "";  

position: absolute;  

inset: -20% -10%;  

z-index: -2;  

pointer-events: none;  

background:  

    radial-gradient(  
        ellipse at 50% 8%,  
        rgba(0, 174, 255, 0.075),  
        transparent 34%  
    ),  

    radial-gradient(  
        ellipse at 15% 52%,  
        rgba(212, 166, 70, 0.055),  
        transparent 32%  
    ),  

    radial-gradient(  
        ellipse at 86% 72%,  
        rgba(0, 128, 210, 0.045),  
        transparent 30%  
    );  

filter: blur(30px);  

opacity: 0.95;

}

/* =========================================================
09.03 — DEEP HORIZON
========================================================= */

.mission-vision::after {

content: "";  

position: absolute;  

left: 8%;  
right: 8%;  
bottom: 0;  

height: 1px;  

pointer-events: none;  

background:  
    linear-gradient(  
        90deg,  
        transparent,  
        rgba(212, 166, 70, 0.18),  
        rgba(0, 174, 255, 0.22),  
        rgba(212, 166, 70, 0.18),  
        transparent  
    );  

box-shadow:  
    0 0 22px rgba(0, 174, 255, 0.08);

}

/* =========================================================
09.04 — SECTION HEADER ATMOSPHERE
========================================================= */

.mission-vision .section-header {

position: relative;  

max-width: 900px;  

margin:  
    0 auto  
    clamp(55px, 6vw, 85px);  

text-align: center;

}

/* =========================================================
09.05 — SECTION LABEL
========================================================= */

.mission-vision .section-label {

position: relative;  

display: inline-block;  

margin-bottom: 18px;  

font-size:  
    clamp(0.68rem, 0.75vw, 0.82rem);  

font-weight: 600;  

letter-spacing:  
    clamp(0.18em, 0.3vw, 0.34em);  

text-transform: uppercase;  

color:  
    rgba(212, 166, 70, 0.88);

}

/* subtle intelligence marker */

.mission-vision .section-label::after {

content: "";  

display: block;  

width: 42px;  

height: 1px;  

margin: 12px auto 0;  

background:  
    linear-gradient(  
        90deg,  
        transparent,  
        rgba(0, 174, 255, 0.9),  
        transparent  
    );  

box-shadow:  
    0 0 9px rgba(0, 174, 255, 0.35);

}

/* =========================================================
09.06 — MASTER HEADING
========================================================= */

.mission-vision .section-header h2 {

margin: 0;  

max-width: 850px;  

margin-inline: auto;  

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

line-height: 0.98;  

font-weight: 500;  

letter-spacing:  
    -0.035em;  

color:  
    rgba(247, 244, 236, 0.97);  

text-shadow:  
    0 0 24px rgba(0, 174, 255, 0.035);

}

/* =========================================================
09.07 — PRINCIPLES GRID
========================================================= */

.mission-vision .principles-grid {

position: relative;  

display: grid;  

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

gap:  
    clamp(20px, 2.2vw, 34px);  

width: min(  
    calc(100% - 40px),  
    1240px  
);  

margin-inline: auto;  

align-items: stretch;

}

/* =========================================================
09.08 — CARD BASE
========================================================= */

.mission-vision .principle-card {

position: relative;  

isolation: isolate;  

min-height:  
    clamp(270px, 25vw, 360px);  

padding:  
    clamp(32px, 3vw, 48px)  
    clamp(28px, 3vw, 44px);  

display: flex;  

flex-direction: column;  

justify-content: center;  

overflow: hidden;  

border:  
    1px solid  
    rgba(212, 166, 70, 0.16);  

border-radius:  
    2px;  

background:  

    linear-gradient(  
        145deg,  
        rgba(12, 24, 42, 0.72),  
        rgba(3, 7, 15, 0.91)  
    );  

box-shadow:  

    inset 0 1px 0  
    rgba(255, 255, 255, 0.035),  

    inset 0 -35px 70px  
    rgba(0, 0, 0, 0.28),  

    0 18px 50px  
    rgba(0, 0, 0, 0.28);  

backdrop-filter:  
    blur(12px);  

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

transform:  
    translate3d(0, 0, 0);  

transition:  
    transform 700ms cubic-bezier(.2,.7,.2,1),  
    border-color 500ms ease,  
    box-shadow 700ms ease,  
    background 700ms ease;

}

/* =========================================================
09.09 — CARD TOP GOLDEN LINE
========================================================= */

.mission-vision .principle-card::before {

content: "";  

position: absolute;  

top: 0;  
left: 10%;  

width: 80%;  

height: 1px;  

background:  
    linear-gradient(  
        90deg,  
        transparent,  
        rgba(212, 166, 70, 0.7),  
        rgba(255, 231, 161, 0.45),  
        rgba(212, 166, 70, 0.7),  
        transparent  
    );  

opacity: 0.7;  

box-shadow:  
    0 0 12px rgba(212, 166, 70, 0.16);  

transition:  
    width 600ms ease,  
    opacity 500ms ease,  
    box-shadow 600ms ease;

}

/* =========================================================
09.10 — ELECTRIC BLUE ENERGY CORE
========================================================= */

.mission-vision .principle-card::after {

content: "";  

position: absolute;  

width: 180px;  
height: 180px;  

right: -90px;  
bottom: -100px;  

border-radius: 50%;  

pointer-events: none;  

background:  
    radial-gradient(  
        circle,  
        rgba(0, 174, 255, 0.11),  
        rgba(0, 120, 210, 0.035) 42%,  
        transparent 72%  
    );  

filter: blur(8px);  

opacity: 0.65;  

transition:  
    transform 800ms cubic-bezier(.2,.7,.2,1),  
    opacity 600ms ease;

}

/* =========================================================
09.11 — CARD CONTENT LAYER
========================================================= */

.mission-vision .principle-card > * {

position: relative;  

z-index: 2;

}

/* =========================================================
09.12 — CARD TITLE
========================================================= */

.mission-vision .principle-card h3 {

margin:  
    0 0 22px;  

font-size:  
    clamp(1.25rem, 1.7vw, 1.65rem);  

line-height: 1.1;  

font-weight: 500;  

letter-spacing:  
    -0.015em;  

color:  
    rgba(245, 242, 234, 0.97);  

transition:  
    color 500ms ease,  
    text-shadow 500ms ease,  
    transform 500ms ease;

}

/* =========================================================
09.13 — CARD BODY
========================================================= */

.mission-vision .principle-card p {

margin: 0;  

max-width: 520px;  

font-size:  
    clamp(0.88rem, 0.95vw, 1rem);  

line-height: 1.9;  

font-weight: 400;  

letter-spacing:  
    0.01em;  

color:  
    rgba(210, 218, 229, 0.72);  

transition:  
    color 500ms ease;

}

/* =========================================================
09.14 — SUBTLE BRONZE MATERIAL LAYER
========================================================= */

.mission-vision .principle-card:nth-child(2) {

border-color:  
    rgba(120, 96, 63, 0.25);

}

.mission-vision .principle-card:nth-child(3) {

border-color:  
    rgba(0, 151, 211, 0.15);

}

/* =========================================================
09.15 — CARD HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

.mission-vision .principle-card:hover {  

    transform:  
        translate3d(0, -10px, 0);  

    border-color:  
        rgba(212, 166, 70, 0.42);  

    background:  

        linear-gradient(  
            145deg,  
            rgba(15, 31, 52, 0.82),  
            rgba(3, 7, 15, 0.95)  
        );  

    box-shadow:  

        inset 0 1px 0  
        rgba(255, 255, 255, 0.055),  

        inset 0 0 50px  
        rgba(0, 174, 255, 0.025),  

        0 28px 75px  
        rgba(0, 0, 0, 0.42),  

        0 0 32px  
        rgba(0, 174, 255, 0.045);  

}  


.mission-vision .principle-card:hover::before {  

    width: 92%;  

    opacity: 1;  

    box-shadow:  
        0 0 18px  
        rgba(212, 166, 70, 0.25);  

}  


.mission-vision .principle-card:hover::after {  

    transform:  
        translate3d(-35px, -35px, 0)  
        scale(1.25);  

    opacity: 1;  

}  


.mission-vision .principle-card:hover h3 {  

    color:  
        rgba(255, 244, 207, 0.99);  

    text-shadow:  
        0 0 18px  
        rgba(212, 166, 70, 0.12);  

    transform:  
        translate3d(2px, 0, 0);  

}  


.mission-vision .principle-card:hover p {  

    color:  
        rgba(222, 229, 238, 0.86);  

}

}

/* =========================================================
09.16 — INTELLIGENCE CARD EDGE
========================================================= */

.mission-vision .principle-card {

--principle-energy:  
    rgba(0, 174, 255, 0.22);

}

.mission-vision .principle-card:nth-child(1) {

--principle-energy:  
    rgba(212, 166, 70, 0.22);

}

.mission-vision .principle-card:nth-child(2) {

--principle-energy:  
    rgba(0, 174, 255, 0.20);

}

.mission-vision .principle-card:nth-child(3) {

--principle-energy:  
    rgba(120, 96, 63, 0.25);

}

/* =========================================================
09.17 — SOFT INTERNAL ENERGY
========================================================= */

.mission-vision .principle-card {

background-image:  

    radial-gradient(  
        ellipse at 15% 10%,  
        var(--principle-energy),  
        transparent 28%  
    ),  

    linear-gradient(  
        145deg,  
        rgba(12, 24, 42, 0.72),  
        rgba(3, 7, 15, 0.91)  
    );

}

/* =========================================================
09.18 — SCROLL REVEAL FOUNDATION
========================================================= */

.mission-vision .principle-card {

opacity: 0;  

transform:  
    translate3d(0, 36px, 0)  
    scale(0.985);  

filter:  
    blur(5px);  

transition:  
    opacity 800ms ease,  
    transform 900ms cubic-bezier(.2,.7,.2,1),  
    filter 900ms ease,  
    border-color 500ms ease,  
    box-shadow 700ms ease,  
    background 700ms ease;

}

/* =========================================================
09.19 — REVEALED STATE
========================================================= */

.mission-vision.is-visible .principle-card,
.mission-vision.in-view .principle-card {

opacity: 1;  

transform:  
    translate3d(0, 0, 0)  
    scale(1);  

filter:  
    blur(0);

}

/* =========================================================
09.20 — STAGGER
========================================================= */

.mission-vision.is-visible
.principle-card:nth-child(1),
.mission-vision.in-view
.principle-card:nth-child(1) {

transition-delay: 80ms;

}

.mission-vision.is-visible
.principle-card:nth-child(2),
.mission-vision.in-view
.principle-card:nth-child(2) {

transition-delay: 190ms;

}

.mission-vision.is-visible
.principle-card:nth-child(3),
.mission-vision.in-view
.principle-card:nth-child(3) {

transition-delay: 300ms;

}

/* =========================================================
09.21 — TABLET
========================================================= */

@media (max-width: 980px) {

.mission-vision {  

    padding:  
        105px  
        0  
        125px;  

}  


.mission-vision .principles-grid {  

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

    width:  
        min(  
            calc(100% - 32px),  
            760px  
        );  

}  


.mission-vision .principle-card:last-child {  

    grid-column:  
        1 / -1;  

    max-width:  
        50%;  

    width: 100%;  

    margin-inline: auto;  

}

}

/* =========================================================
09.22 — MOBILE
========================================================= */

@media (max-width: 680px) {

.mission-vision {  

    padding:  
        90px  
        0  
        105px;  

}  


.mission-vision .section-header {  

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

    margin-bottom:  
        48px;  

}  


.mission-vision .section-header h2 {  

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

    line-height:  
        1.02;  

}  


.mission-vision .principles-grid {  

    display:  
        grid;  

    grid-template-columns:  
        1fr;  

    gap:  
        16px;  

    width:  
        calc(100% - 32px);  

}  


.mission-vision .principle-card,  
.mission-vision .principle-card:last-child {  

    grid-column:  
        auto;  

    max-width:  
        none;  

    min-height:  
        255px;  

    padding:  
        30px 26px;  

}  


.mission-vision .principle-card h3 {  

    margin-bottom:  
        17px;  

    font-size:  
        1.28rem;  

}  


.mission-vision .principle-card p {  

    font-size:  
        0.9rem;  

    line-height:  
        1.8;  

}

}

/* =========================================================
09.23 — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

.mission-vision {  

    padding:  
        78px  
        0  
        90px;  

}  


.mission-vision .principles-grid {  

    width:  
        calc(100% - 24px);  

}  


.mission-vision .principle-card {  

    min-height:  
        235px;  

    padding:  
        27px 22px;  

}  


.mission-vision .section-header {  

    width:  
        calc(100% - 28px);  

}

}

/* =========================================================
09.24 — REDUCED MOTION
========================================================= */

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

.mission-vision .principle-card,  
.mission-vision .principle-card::before,  
.mission-vision .principle-card::after,  
.mission-vision .principle-card h3 {  

    transition:  
        none !important;  

    animation:  
        none !important;  

}  


.mission-vision .principle-card {  

    opacity: 1;  

    transform:  
        none;  

    filter:  
        none;  

}

}

/* =========================================================
09.25 — MOTION SAFETY
========================================================= */

.mission-vision .principle-card {

contain:  
    layout paint;

}

/* =========================================================
ARS HERITAGE GROUP — HOME
10 — ARS PHILOSOPHY HOME

SYSTEM:
Heritage × Intelligence

HTML:
.ars-philosophy-home
.concept-logo
.concept-glow
.philosophy-content
.philosophy-text

VISUAL DNA:
Gold / Heritage
Electric Blue / Intelligence
Deep Navy / Technology
Black / Depth
Bronze / Engineering
White / Precision

DESIGN LANGUAGE:
Cinematic
Asymmetric
Premium
Editorial
Automotive Intelligence
========================================================= */

/* =========================================================
10.1 — MASTER SECTION
========================================================= */

.ars-philosophy-home {

position: relative;  

isolation: isolate;  

overflow: hidden;  

padding:  
    clamp(120px, 12vw, 210px)  
    0;  

background:  
    radial-gradient(  
        ellipse at 18% 50%,  
        rgba(0, 174, 255, 0.065),  
        transparent 34%  
    ),  
    radial-gradient(  
        ellipse at 78% 48%,  
        rgba(213, 170, 93, 0.075),  
        transparent 38%  
    ),  
    linear-gradient(  
        180deg,  
        #020406 0%,  
        #050a0f 48%,  
        #020406 100%  
    );

}

/* =========================================================
10.2 — CINEMATIC BACKGROUND DEPTH
========================================================= */

.ars-philosophy-home::before {

content: "";  

position: absolute;  

inset: 0;  

z-index: -3;  

pointer-events: none;  

background:  
    radial-gradient(  
        circle at 50% 50%,  
        rgba(0, 174, 255, 0.045),  
        transparent 42%  
    ),  
    radial-gradient(  
        circle at 15% 20%,  
        rgba(213, 170, 93, 0.035),  
        transparent 28%  
    ),  
    radial-gradient(  
        circle at 85% 80%,  
        rgba(174, 116, 65, 0.035),  
        transparent 30%  
    );

}

/* =========================================================
10.3 — ATMOSPHERIC VIGNETTE
========================================================= */

.ars-philosophy-home::after {

content: "";  

position: absolute;  

inset: 0;  

z-index: -2;  

pointer-events: none;  

background:  
    radial-gradient(  
        ellipse at center,  
        transparent 35%,  
        rgba(0, 0, 0, 0.38) 100%  
    );

}

/* =========================================================
10.4 — SECTION HEADER
========================================================= */

.ars-philosophy-home .section-header {

position: relative;  

max-width: 1050px;  

margin:  
    0 auto  
    clamp(65px, 7vw, 105px);  

text-align: center;

}

/* =========================================================
10.5 — SECTION LABEL
========================================================= */

.ars-philosophy-home .section-label {

display: inline-flex;  

align-items: center;  

position: relative;  

margin-bottom: 20px;  

padding:  
    7px 18px;  

border:  
    1px solid  
    rgba(213, 170, 93, 0.30);  

border-radius: 999px;  

background:  
    linear-gradient(  
        135deg,  
        rgba(255, 255, 255, 0.035),  
        rgba(0, 174, 255, 0.025)  
    );  

color:  
    rgba(225, 187, 103, 0.94);  

font-size:  
    0.69rem;  

font-weight:  
    600;  

letter-spacing:  
    0.25em;  

text-transform:  
    uppercase;  

box-shadow:  
    inset 0 0 18px rgba(0, 174, 255, 0.025),  
    0 0 20px rgba(213, 170, 93, 0.045);

}

/* =========================================================
10.6 — LABEL ENERGY DOT
========================================================= */

.ars-philosophy-home .section-label::before {

content: "";  

width: 5px;  

height: 5px;  

margin-right: 10px;  

border-radius: 50%;  

background:  
    #d5aa5d;  

box-shadow:  
    0 0 7px rgba(213, 170, 93, 0.9),  
    0 0 16px rgba(0, 174, 255, 0.28);  

animation:  
    arsPhilosophyLabelPulse  
    3.4s  
    ease-in-out  
    infinite;

}

/* =========================================================
10.7 — HEADER TITLE
========================================================= */

.ars-philosophy-home .section-header h2 {

margin: 0;  

max-width: 900px;  

margin-inline: auto;  

color:  
    #f3f5f7;  

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

line-height:  
    1.04;  

font-weight:  
    500;  

letter-spacing:  
    -0.045em;  

text-wrap:  
    balance;  

text-shadow:  
    0 0 30px rgba(0, 174, 255, 0.055),  
    0 15px 45px rgba(0, 0, 0, 0.68);

}

/* =========================================================
10.8 — PHILOSOPHY CONTENT MASTER
========================================================= */

.ars-philosophy-home .philosophy-content {

position: relative;  

display: grid;  

grid-template-columns:  
    minmax(330px, 0.82fr)  
    minmax(420px, 1.18fr);  

align-items: center;  

gap:  
    clamp(55px, 8vw, 130px);  

width:  
    min(1180px, 100%);  

margin:  
    0 auto;

}

/* =========================================================
10.9 — ASYMMETRIC COMPOSITION
========================================================= */

.ars-philosophy-home .philosophy-content::before {

content: "";  

position: absolute;  

left: 31%;  

top: 50%;  

width: 42%;  

height: 1px;  

transform:  
    translateY(-50%);  

background:  
    linear-gradient(  
        90deg,  
        transparent,  
        rgba(213, 170, 93, 0.16),  
        rgba(0, 174, 255, 0.28),  
        transparent  
    );  

opacity:  
    0.65;  

pointer-events:  
    none;

}

/* =========================================================
10.10 — CONCEPT LOGO STAGE
========================================================= */

.ars-philosophy-home .concept-logo {

position: relative;  

display: flex;  

align-items: center;  

justify-content: center;  

min-height:  
    clamp(340px, 38vw, 500px);  

isolation: isolate;

}

/* =========================================================
10.11 — LOGO IMAGE
========================================================= */

.ars-philosophy-home .concept-logo img {

position: relative;  

z-index: 5;  

display: block;  

width:  
    min(65%, 330px);  

max-width:  
    100%;  

height:  
    auto;  

object-fit:  
    contain;  

filter:  
    drop-shadow(  
        0 0 14px rgba(213, 170, 93, 0.28)  
    )  
    drop-shadow(  
        0 0 35px rgba(0, 174, 255, 0.10)  
    );  

transform:  
    translate3d(0, 0, 0);  

transition:  
    transform 900ms cubic-bezier(.16, 1, .3, 1),  
    filter 900ms ease;

}

/* =========================================================
10.12 — CONCEPT LOGO HOVER
========================================================= */

.ars-philosophy-home .concept-logo:hover img {

transform:  
    scale(1.035);  

filter:  
    drop-shadow(  
        0 0 20px rgba(213, 170, 93, 0.48)  
    )  
    drop-shadow(  
        0 0 48px rgba(0, 174, 255, 0.20)  
    );

}

/* =========================================================
10.13 — CONCEPT GLOW MASTER
========================================================= */

.ars-philosophy-home .concept-glow {

position: absolute;  

left: 50%;  
top: 50%;  

width:  
    clamp(260px, 30vw, 430px);  

height:  
    clamp(260px, 30vw, 430px);  

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

border-radius:  
    50%;  

background:  
    radial-gradient(  
        circle,  
        rgba(213, 170, 93, 0.18) 0%,  
        rgba(213, 170, 93, 0.075) 24%,  
        rgba(0, 174, 255, 0.075) 44%,  
        rgba(0, 174, 255, 0.025) 60%,  
        transparent 74%  
    );  

filter:  
    blur(8px);  

opacity:  
    0.90;  

z-index:  
    1;  

pointer-events:  
    none;  

animation:  
    arsConceptGlow  
    7s  
    ease-in-out  
    infinite;

}

/* =========================================================
10.14 — GOLD RADIATION RING
========================================================= */

.ars-philosophy-home .concept-logo::before {

content: "";  

position: absolute;  

left: 50%;  
top: 50%;  

width:  
    clamp(210px, 25vw, 360px);  

height:  
    clamp(210px, 25vw, 360px);  

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

border:  
    1px solid  
    rgba(213, 170, 93, 0.20);  

border-radius:  
    50%;  

box-shadow:  
    0 0 28px rgba(213, 170, 93, 0.08),  
    inset 0 0 28px rgba(0, 174, 255, 0.035);  

opacity:  
    0.72;  

pointer-events:  
    none;  

animation:  
    arsPhilosophyOrbit  
    18s  
    linear  
    infinite;

}

/* =========================================================
10.15 — SECONDARY BLUE ORBIT
========================================================= */

.ars-philosophy-home .concept-logo::after {

content: "";  

position: absolute;  

left: 50%;  
top: 50%;  

width:  
    clamp(280px, 34vw, 480px);  

height:  
    clamp(175px, 22vw, 300px);  

transform:  
    translate(-50%, -50%)  
    rotate(-17deg);  

border:  
    1px solid  
    rgba(0, 174, 255, 0.13);  

border-radius:  
    50%;  

box-shadow:  
    0 0 30px rgba(0, 174, 255, 0.055);  

opacity:  
    0.65;  

pointer-events:  
    none;  

animation:  
    arsPhilosophyOrbitReverse  
    24s  
    linear  
    infinite;

}

/* =========================================================
10.16 — PHILOSOPHY TEXT CONTAINER
========================================================= */

.ars-philosophy-home .philosophy-text {

position: relative;  

max-width:  
    650px;  

padding:  
    clamp(35px, 4vw, 58px);  

border-left:  
    1px solid  
    rgba(213, 170, 93, 0.28);  

background:  
    linear-gradient(  
        100deg,  
        rgba(10, 24, 34, 0.62),  
        rgba(3, 8, 12, 0.30),  
        transparent  
    );  

box-shadow:  
    inset 18px 0 35px rgba(0, 174, 255, 0.018);

}

/* =========================================================
10.17 — TEXT ENERGY TRACE
========================================================= */

.ars-philosophy-home .philosophy-text::before {

content: "";  

position: absolute;  

left:  
    -1px;  

top:  
    8%;  

width:  
    1px;  

height:  
    84%;  

background:  
    linear-gradient(  
        180deg,  
        transparent,  
        rgba(213, 170, 93, 0.75),  
        rgba(0, 174, 255, 0.55),  
        rgba(213, 170, 93, 0.45),  
        transparent  
    );  

box-shadow:  
    0 0 12px rgba(0, 174, 255, 0.20);  

transform-origin:  
    center;  

animation:  
    arsPhilosophyTrace  
    5s  
    ease-in-out  
    infinite;

}

/* =========================================================
10.18 — PHILOSOPHY HEADING
========================================================= */

.ars-philosophy-home .philosophy-text h3 {

margin:  
    0 0 24px;  

color:  
    #e8c77c;  

font-size:  
    clamp(1.65rem, 2.4vw, 2.35rem);  

line-height:  
    1.16;  

font-weight:  
    500;  

letter-spacing:  
    -0.025em;  

text-shadow:  
    0 0 22px rgba(213, 170, 93, 0.08);  

transition:  
    color 500ms ease,  
    text-shadow 500ms ease;

}

/* =========================================================
10.19 — HEADING BLUE RESPONSE
========================================================= */

.ars-philosophy-home .philosophy-text:hover h3 {

color:  
    #f0d48d;  

text-shadow:  
    0 0 16px rgba(213, 170, 93, 0.18),  
    0 0 30px rgba(0, 174, 255, 0.08);

}

/* =========================================================
10.20 — PHILOSOPHY BODY
========================================================= */

.ars-philosophy-home .philosophy-text p {

margin:  
    0;  

max-width:  
    52ch;  

color:  
    rgba(224, 231, 236, 0.75);  

font-size:  
    clamp(1rem, 1.15vw, 1.14rem);  

line-height:  
    2;  

font-weight:  
    300;  

letter-spacing:  
    0.005em;

}

/* =========================================================
10.21 — HERITAGE WORD RHYTHM
========================================================= */

.ars-philosophy-home .philosophy-text p::first-letter {

color:  
    #e4bd69;  

font-size:  
    1.45em;  

font-weight:  
    500;

}

/* =========================================================
10.22 — QUOTATION TREATMENT
========================================================= */

.ars-philosophy-home .philosophy-text blockquote {

position:  
    relative;  

margin:  
    38px 0 0;  

padding:  
    25px 0 0 26px;  

border:  
    0;  

color:  
    #f0d38c;  

font-family:  
    inherit;  

font-size:  
    clamp(1.08rem, 1.55vw, 1.45rem);  

line-height:  
    1.65;  

font-weight:  
    400;  

letter-spacing:  
    0.015em;  

text-shadow:  
    0 0 20px rgba(213, 170, 93, 0.12);

}

/* =========================================================
10.23 — QUOTE GOLD LINE
========================================================= */

.ars-philosophy-home .philosophy-text blockquote::before {

content:  
    "";  

position:  
    absolute;  

left:  
    0;  

top:  
    28px;  

width:  
    2px;  

height:  
    calc(100% - 30px);  

background:  
    linear-gradient(  
        180deg,  
        rgba(213, 170, 93, 0.9),  
        rgba(0, 174, 255, 0.45),  
        transparent  
    );  

box-shadow:  
    0 0 12px rgba(213, 170, 93, 0.15);

}

/* =========================================================
10.24 — QUOTE TOP RADIATION
========================================================= */

.ars-philosophy-home .philosophy-text blockquote::after {

content:  
    "";  

position:  
    absolute;  

left:  
    26px;  

top:  
    0;  

width:  
    95px;  

height:  
    1px;  

background:  
    linear-gradient(  
        90deg,  
        rgba(213, 170, 93, 0.75),  
        rgba(0, 174, 255, 0.35),  
        transparent  
    );

}

/* =========================================================
10.25 — SCROLL REVEAL FOUNDATION
========================================================= */

.ars-philosophy-home .concept-logo,
.ars-philosophy-home .philosophy-text {

opacity:  
    1;  

transform:  
    translate3d(0, 0, 0);

}

/* =========================================================
10.26 — REVEAL COMPATIBILITY
========================================================= */

.ars-philosophy-home.reveal-ready .concept-logo {

transition:  
    opacity 1100ms ease,  
    transform 1100ms cubic-bezier(.16, 1, .3, 1);

}

.ars-philosophy-home.reveal-ready .philosophy-text {

transition:  
    opacity 1000ms ease 140ms,  
    transform 1000ms cubic-bezier(.16, 1, .3, 1) 140ms;

}

/* =========================================================
10.27 — TABLET
========================================================= */

@media (max-width: 980px) {

.ars-philosophy-home {  

    padding:  
        110px 0  
        130px;  

}  


.ars-philosophy-home .philosophy-content {  

    grid-template-columns:  
        1fr;  

    gap:  
        55px;  

    text-align:  
        center;  

}  


.ars-philosophy-home .concept-logo {  

    min-height:  
        350px;  

}  


.ars-philosophy-home .philosophy-text {  

    max-width:  
        760px;  

    margin:  
        0 auto;  

    text-align:  
        left;  

    border-left:  
        1px solid  
        rgba(213, 170, 93, 0.28);  

}  


.ars-philosophy-home .philosophy-content::before {  

    display:  
        none;  

}

}

/* =========================================================
10.28 — MOBILE
========================================================= */

@media (max-width: 680px) {

.ars-philosophy-home {  

    padding:  
        88px 0  
        100px;  

}  


.ars-philosophy-home .section-header {  

    margin-bottom:  
        45px;  

}  


.ars-philosophy-home .section-label {  

    font-size:  
        0.61rem;  

    letter-spacing:  
        0.18em;  

}  


.ars-philosophy-home .section-header h2 {  

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

    line-height:  
        1.10;  

}  


.ars-philosophy-home .philosophy-content {  

    gap:  
        35px;  

}  


.ars-philosophy-home .concept-logo {  

    min-height:  
        270px;  

}  


.ars-philosophy-home .concept-logo img {  

    width:  
        min(68%, 250px);  

}  


.ars-philosophy-home .concept-glow {  

    width:  
        260px;  

    height:  
        260px;  

}  


.ars-philosophy-home .philosophy-text {  

    padding:  
        28px 24px 30px;  

    border-left:  
        1px solid  
        rgba(213, 170, 93, 0.28);  

    background:  
        linear-gradient(  
            100deg,  
            rgba(10, 24, 34, 0.55),  
            transparent  
        );  

}  


.ars-philosophy-home .philosophy-text h3 {  

    font-size:  
        1.55rem;  

    margin-bottom:  
        20px;  

}  


.ars-philosophy-home .philosophy-text p {  

    font-size:  
        0.94rem;  

    line-height:  
        1.85;  

}  


.ars-philosophy-home .philosophy-text blockquote {  

    margin-top:  
        30px;  

    padding:  
        20px 0 0 20px;  

    font-size:  
        1rem;  

}

}

/* =========================================================
10.29 — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

.ars-philosophy-home {  

    padding:  
        76px 0  
        88px;  

}  


.ars-philosophy-home .concept-logo {  

    min-height:  
        235px;  

}  


.ars-philosophy-home .concept-logo img {  

    width:  
        205px;  

}  


.ars-philosophy-home .concept-logo::before {  

    width:  
        190px;  

    height:  
        190px;  

}  


.ars-philosophy-home .concept-logo::after {  

    width:  
        245px;  

    height:  
        150px;  

}  


.ars-philosophy-home .philosophy-text {  

    padding:  
        25px 21px 27px;  

}

}

/* =========================================================
10.30 — REDUCED MOTION
========================================================= */

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

.ars-philosophy-home .section-label::before,  
.ars-philosophy-home .concept-glow,  
.ars-philosophy-home .concept-logo::before,  
.ars-philosophy-home .concept-logo::after,  
.ars-philosophy-home .philosophy-text::before {  

    animation:  
        none !important;  

}  


.ars-philosophy-home .concept-logo img,  
.ars-philosophy-home .philosophy-text h3 {  

    transition:  
        none !important;  

}

}

/* =========================================================
10.31 — KEYFRAME: LABEL
========================================================= */

@keyframes arsPhilosophyLabelPulse {

0%,  
100% {  

    opacity:  
        0.55;  

    transform:  
        scale(0.82);  

}  

50% {  

    opacity:  
        1;  

    transform:  
        scale(1);  

}

}

/* =========================================================
10.32 — KEYFRAME: CONCEPT GLOW
========================================================= */

@keyframes arsConceptGlow {

0%,  
100% {  

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

    opacity:  
        0.72;  

}  

50% {  

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

    opacity:  
        1;  

}

}

/* =========================================================
10.33 — KEYFRAME: GOLD ORBIT
========================================================= */

@keyframes arsPhilosophyOrbit {

from {  

    transform:  
        translate(-50%, -50%)  
        rotate(0deg);  

}  

to {  

    transform:  
        translate(-50%, -50%)  
        rotate(360deg);  

}

}

/* =========================================================
10.34 — KEYFRAME: BLUE ORBIT
========================================================= */

@keyframes arsPhilosophyOrbitReverse {

from {  

    transform:  
        translate(-50%, -50%)  
        rotate(-17deg)  
        rotate(0deg);  

}  

to {  

    transform:  
        translate(-50%, -50%)  
        rotate(-17deg)  
        rotate(-360deg);  

}

}

/* =========================================================
10.35 — KEYFRAME: TEXT ENERGY TRACE
========================================================= */

@keyframes arsPhilosophyTrace {

0%,  
100% {  

    opacity:  
        0.35;  

    transform:  
        scaleY(0.72);  

}  

50% {  

    opacity:  
        1;  

    transform:  
        scaleY(1);  

}

}

/* =========================================================
10.36 — END
========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   11 — ECOSYSTEM MASTER ARCHITECTURE / LAYOUT
   =========================================================

   RESPONSIBILITY
   ---------------------------------------------------------
   ONLY:
   - Ecosystem section architecture
   - 14-card master geometry
   - Core placement
   - Inner / Outer ecosystem layout zones
   - Desktop / Tablet / Mobile reflow
   - Grid spacing
   - Alignment
   - Proportions
   - Responsive structure

   LOCKED CARD ARCHITECTURE
   ---------------------------------------------------------
   01  CORE
   02–07  INNER ECOSYSTEM — 6 CARDS
   08–14  OUTER ECOSYSTEM — 7 CARDS

   FILE OWNERSHIP
   ---------------------------------------------------------
   11 → Architecture / Layout
   12 → Core Card
   13 → Specialized Cards / Inner + Outer Identity
   14 → Material Engine
   15 → Energy / Golden Reveal / Energy Bridge
   16 → Motion / Cinematic Animation

   IMPORTANT
   ---------------------------------------------------------
   THIS FILE DOES NOT CONTROL:
   - Card visual appearance
   - Card materials
   - Glass effects
   - Borders
   - Shadows
   - Glow
   - Energy
   - Golden reveal
   - Blue reveal
   - Hover animation
   - Selected state
   - Active state
   - Image effects
   - Logo effects
   - Typography styling
   - Card motion

   HTML IS LOCKED.
   ========================================================= */


/* =========================================================
   11.01 — MASTER ECOSYSTEM SECTION
   ========================================================= */

.ecosystem {

    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 100vh;

    box-sizing: border-box;

    overflow: hidden;

    padding:
        clamp(120px, 12vw, 190px)
        0
        clamp(130px, 13vw, 210px);

}


/* =========================================================
   11.02 — SECTION HEADER ARCHITECTURE
   ========================================================= */

.ecosystem .section-header {

    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 40px),
            950px
        );

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

    text-align: center;

}


/* =========================================================
   11.03 — SECTION LABEL POSITION
   ========================================================= */

.ecosystem .section-label {

    display: inline-block;

    margin-bottom: 22px;

}


/* =========================================================
   11.04 — SECTION TITLE GEOMETRY
   ========================================================= */

.ecosystem .section-header h2 {

    max-width: 850px;

    margin: 0 auto;

    line-height: 1;

    text-wrap: balance;

}


/* =========================================================
   11.05 — SECTION DESCRIPTION GEOMETRY
   ========================================================= */

.ecosystem .section-header p {

    max-width: 680px;

    margin:
        28px auto 0;

    line-height: 1.8;

}


/* =========================================================
   11.06 — MASTER CARD SYSTEM
   =========================================================

   The existing HTML contains all 14 cards
   inside the master ecosystem grid.

   Architecture:

   01 → Core
   02–07 → Inner Layer
   08–14 → Outer Layer

   Visual identity belongs to File 13.
   ========================================================= */

.ecosystem .ars-core-grid {

    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 40px),
            1380px
        );

    margin: 0 auto;

    display: grid;

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

    gap:
        clamp(
            18px,
            2vw,
            30px
        );

    align-items: stretch;

    box-sizing: border-box;

}


/* =========================================================
   11.07 — GRID CHILDREN
   ========================================================= */

.ecosystem .ars-core-grid > article {

    min-width: 0;

    align-self: stretch;

    box-sizing: border-box;

}


/* =========================================================
   11.08 — CORE CARD ARCHITECTURAL POSITION
   =========================================================

   Core owns the central 2 × 2 architectural block.

   Visual elevation is NOT controlled here.
   ========================================================= */

.ecosystem .ars-core-grid
.ars-core-card {

    grid-column:
        span 2;

    grid-row:
        span 2;

}


/* =========================================================
   11.09 — SPECIALIZED CARD ARCHITECTURAL POSITION
   ========================================================= */

.ecosystem .ars-core-grid
.ars-specialized-card {

    grid-column:
        span 1;

    grid-row:
        span 1;

}


/* =========================================================
   11.10 — MASTER ROW GEOMETRY
   ========================================================= */

.ecosystem .ars-core-grid {

    grid-auto-rows:
        minmax(
            250px,
            auto
        );

}


/* =========================================================
   11.11 — CORE PROPORTION
   ========================================================= */

.ecosystem .ars-core-grid
.ars-core-card {

    min-height:
        clamp(
            520px,
            45vw,
            650px
        );

}


/* =========================================================
   11.12 — SPECIALIZED CARD PROPORTION
   ========================================================= */

.ecosystem .ars-core-grid
.ars-specialized-card {

    min-height:
        clamp(
            250px,
            21vw,
            315px
        );

}


/* =========================================================
   11.13 — RESERVED EXPANSION WRAPPER
   =========================================================

   The reserved .ars-specialized-grid remains inactive.

   No duplicate layout.
   No duplicate cards.
   No artificial content.

   Current 14-card architecture remains inside
   .ars-core-grid.
   ========================================================= */

.ecosystem .ars-specialized-grid {

    display: none;

}


/* =========================================================
   11.14 — XL DESKTOP
   ========================================================= */

@media (min-width: 1440px) {

    .ecosystem .ars-core-grid {

        width:
            min(
                calc(100% - 80px),
                1480px
            );

        gap: 30px;

    }

    .ecosystem .ars-core-grid
    .ars-core-card {

        min-height: 650px;

    }

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        min-height: 310px;

    }

}


/* =========================================================
   11.15 — STANDARD DESKTOP
   ========================================================= */

@media (min-width: 1101px)
       and (max-width: 1439px) {

    .ecosystem .ars-core-grid {

        width:
            min(
                calc(100% - 48px),
                1320px
            );

    }

    .ecosystem .ars-core-grid
    .ars-core-card {

        min-height: 560px;

    }

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        min-height: 270px;

    }

}


/* =========================================================
   11.16 — TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1100px) {

    .ecosystem {

        padding:
            105px
            0
            125px;

    }

    .ecosystem .ars-core-grid {

        width:
            min(
                calc(100% - 44px),
                900px
            );

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

        gap: 20px;

        grid-auto-rows:
            auto;

    }

    /*
     * Core becomes full-width.
     */

    .ecosystem .ars-core-grid
    .ars-core-card {

        grid-column:
            span 2;

        grid-row:
            auto;

        min-height: 480px;

    }

    /*
     * Specialized cards become
     * two-column architectural units.
     */

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        grid-column:
            span 1;

        grid-row:
            auto;

        min-height: 300px;

    }

}


/* =========================================================
   11.17 — TABLET PORTRAIT
   ========================================================= */

@media (max-width: 820px) {

    .ecosystem {

        padding:
            95px
            0
            110px;

    }

    .ecosystem .section-header {

        width:
            calc(100% - 36px);

        margin-bottom:
            55px;

    }

    .ecosystem .ars-core-grid {

        width:
            calc(100% - 34px);

        gap: 17px;

    }

    .ecosystem .ars-core-grid
    .ars-core-card {

        min-height: 430px;

    }

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        min-height: 275px;

    }

}


/* =========================================================
   11.18 — MOBILE MASTER REFLOW
   ========================================================= */

@media (max-width: 680px) {

    .ecosystem {

        min-height: auto;

        padding:
            82px
            0
            95px;

    }

    .ecosystem .section-header {

        width:
            calc(100% - 30px);

        margin-bottom:
            45px;

    }

    .ecosystem .section-header p {

        margin-top: 22px;

        line-height: 1.75;

    }

    /*
     * Single-column cinematic architecture.
     *
     * Core first.
     * Inner + Outer cards continue
     * in their existing HTML order.
     */

    .ecosystem .ars-core-grid {

        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr;

        gap: 15px;

    }

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

        grid-column: auto;

        grid-row: auto;

        min-height: auto;

    }

    .ecosystem .ars-core-grid
    .ars-core-card {

        min-height: 410px;

    }

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        min-height: 340px;

    }

}


/* =========================================================
   11.19 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ecosystem {

        padding:
            72px
            0
            82px;

    }

    .ecosystem .section-header {

        width:
            calc(100% - 26px);

        margin-bottom:
            38px;

    }

    .ecosystem .ars-core-grid {

        width:
            calc(100% - 18px);

        gap: 13px;

    }

    .ecosystem .ars-core-grid
    .ars-core-card {

        min-height: 360px;

    }

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        min-height: 315px;

    }

}


/* =========================================================
   11.20 — VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .ecosystem {

        padding:
            65px
            0
            75px;

    }

    .ecosystem .ars-core-grid {

        width:
            calc(100% - 14px);

    }

    .ecosystem .ars-core-grid
    .ars-core-card {

        min-height: 330px;

    }

    .ecosystem .ars-core-grid
    .ars-specialized-card {

        min-height: 290px;

    }

}


/* =========================================================
   11.21 — TOUCH ARCHITECTURE SAFETY
   ========================================================= */

@media (hover: none)
       and (pointer: coarse) {

    .ecosystem .ars-core-grid > article {

        -webkit-tap-highlight-color:
            transparent;

    }

}


/* =========================================================
   11.22 — REDUCED MOTION ARCHITECTURAL SAFETY
   =========================================================

   File 11 does not animate cards.

   This only removes any transition that might have
   been inherited from another layer.
   ========================================================= */

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

    .ecosystem .ars-core-grid > article {

        transition:
            none !important;

    }

}


/* =========================================================
   11.23 — BOX MODEL LOCK
   ========================================================= */

.ecosystem,
.ecosystem .container,
.ecosystem .ars-core-grid,
.ecosystem .ars-core-grid > article {

    box-sizing:
        border-box;

}


/* =========================================================
   11.24 — ARCHITECTURAL INTEGRITY LOCK
   =========================================================

   FILE 11 deliberately does NOT define:

   ::before / ::after card energy
   background material
   border
   border glow
   box-shadow
   filter
   hover
   active
   selected
   energy-fading
   image effects
   logo effects
   CTA effects
   animation
   transform
   card tilt
   energy bridge

   Those responsibilities belong to Files 12–16.

   =========================================================
   FINAL ARCHITECTURE

   14 CARDS

   01 → CENTRAL CORE

   INNER LAYER
   02 → ARS Brain
   03 → ARS Design
   04 → ARS Company
   05 → ROSE AI
   06 → ZHR NAJI
   07 → ARS Engineering

   OUTER LAYER
   08 → Philosophy
   09 → Media Center
   10 → Partnership
   11 → Open Door
   12 → Collection
   13 → Become ARS
   14 → Future Lab

   DESKTOP
   → 4-column master architecture
   → Core = 2 × 2
   → Specialized = 1 × 1

   TABLET
   → 2-column architecture
   → Core = full width

   MOBILE
   → 1-column architecture
   → Core + Specialized cinematic stack

   INNER / OUTER VISUAL IDENTITY
   → FILE 13

   MATERIAL SYSTEM
   → FILE 14

   ENERGY + GOLDEN REVEAL
   → FILE 15

   ENERGY BRIDGE
   → FILE 15

   MOTION / CINEMATIC ANIMATION
   → FILE 16

   =========================================================
   END OF
   11 — ECOSYSTEM MASTER ARCHITECTURE / LAYOUT
   ========================================================= */

   12 — ARS CORE CARD
   =========================================================
   RESPONSIBILITY
   ---------------------------------------------------------
   CENTRAL / CORE CARD ONLY

   ARCHITECTURE
   ---------------------------------------------------------
   11 → Architecture / Layout
   12 → Core Card                     ← THIS FILE
   13 → Specialized Cards
   14 → Material Engine
   15 → Energy / Golden Reveal
   16 → Motion / Cinematic Animation

   CORE IDENTITY
   ---------------------------------------------------------
   Heritage       → Gold
   Intelligence   → Electric Blue
   Technology     → Deep Navy
   Luxury         → Black
   Engineering    → Bronze
   Precision      → White

   IMPORTANT
   ---------------------------------------------------------
   HTML IS LOCKED.
   NO HTML MODIFICATION.

   THIS FILE DOES NOT CONTROL:
   - Specialized cards
   - Material system
   - Energy bridge
   - Golden reveal
   - Cinematic animation
   - Global card geometry

   Later systems may enhance this card,
   but this file owns ONLY the Core Card identity.

   ========================================================= */


/* =========================================================
   12.01 — CORE FOUNDATION
   ========================================================= */

.ars-core-card {

    position: relative;
    isolation: isolate;

    min-width: 0;
    min-height: 100%;

    overflow: hidden;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(10, 15, 23, .975),
            rgba(3, 7, 13, .99)
        );

    border:
        1px solid
        rgba(212, 175, 55, .42);

    box-shadow:

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

        0 18px 60px
        rgba(0,0,0,.58),

        0 0 38px
        rgba(212,175,55,.055),

        0 0 55px
        rgba(40,170,255,.025);

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

}


/* =========================================================
   12.02 — CORE ATMOSPHERE
   ---------------------------------------------------------
   Base identity only.
   Energy effects remain Section 15.
   ========================================================= */

.ars-core-card::before {

    content: "";

    position: absolute;

    inset: -18%;

    z-index: -2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 18%,
            rgba(212,175,55,.105),
            transparent 30%
        ),

        radial-gradient(
            circle at 78% 58%,
            rgba(40,170,255,.055),
            transparent 34%
        ),

        radial-gradient(
            circle at 20% 82%,
            rgba(123,78,36,.065),
            transparent 30%
        );

    filter:
        blur(28px);

    opacity:
        .85;

}


/* =========================================================
   12.03 — CORE LINK
   ========================================================= */

.ars-core-card
.ars-card-link {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;

    min-height: 100%;

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   12.04 — CORE IMAGE
   ========================================================= */

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

    position: relative;

    overflow: hidden;

    isolation: isolate;

    flex:
        0 0 auto;

    min-height:
        280px;

    background:
        rgba(2,5,10,.9);

}


/* =========================================================
   12.05 — CORE IMAGE BASE ATMOSPHERE
   ========================================================= */

.ars-core-card
.ars-card-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            transparent 35%,
            rgba(0,0,0,.34) 72%,
            rgba(2,4,8,.82) 100%
        ),

        linear-gradient(
            90deg,
            rgba(0,0,0,.20),
            transparent 48%,
            rgba(212,175,55,.035)
        );

}


/* =========================================================
   12.06 — CORE IMAGE LIGHT FIELD
   ---------------------------------------------------------
   Static identity lighting.
   Dynamic image energy belongs to Section 15.
   ========================================================= */

.ars-core-card
.ars-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 50% 32%,
            rgba(212,175,55,.065),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 82% 58%,
            rgba(40,170,255,.045),
            transparent 38%
        );

    opacity:
        .8;

}


/* =========================================================
   12.07 — CORE IMAGE
   ========================================================= */

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

    display: block;

    width: 100%;
    height: 100%;

    min-height: 280px;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    filter:
        saturate(.88)
        contrast(1.07)
        brightness(.84);

}


/* =========================================================
   12.08 — CORE LOGO PLATFORM
   ========================================================= */

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

    position: relative;

    z-index: 4;

    display: flex;

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

    flex:
        0 0 auto;

    width:
        116px;

    height:
        116px;

    margin:
        -52px auto 0;

    padding:
        17px;

    box-sizing:
        border-box;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(11,17,26,.99) 38%,
            rgba(4,8,14,.96) 72%,
            rgba(0,0,0,.90) 100%
        );

    border:
        1px solid
        rgba(212,175,55,.58);

    box-shadow:

        0 0 0 1px
        rgba(255,255,255,.018),

        0 0 22px
        rgba(212,175,55,.16),

        0 0 38px
        rgba(40,170,255,.055),

        inset 0 0 24px
        rgba(0,0,0,.82);

}


/* =========================================================
   12.09 — CORE LOGO RING
   ========================================================= */

.ars-core-card
.ars-card-logo::before {

    content: "";

    position: absolute;

    inset:
        -8px;

    border-radius:
        inherit;

    border:
        1px solid
        rgba(40,170,255,.18);

    box-shadow:

        0 0 16px
        rgba(40,170,255,.08),

        0 0 28px
        rgba(212,175,55,.055);

    pointer-events:
        none;

}


/* =========================================================
   12.10 — CORE LOGO IMAGE
   ========================================================= */

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

    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 8px
            rgba(212,175,55,.20)
        )
        drop-shadow(
            0 0 16px
            rgba(40,170,255,.055)
        );

}


/* =========================================================
   12.11 — CORE CONTENT
   ========================================================= */

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

    position: relative;

    z-index: 3;

    flex:
        1 1 auto;

    padding:
        28px 34px 34px;

    text-align:
        center;

}


/* =========================================================
   12.12 — CORE CATEGORY
   ========================================================= */

.ars-core-card
.ars-card-category {

    display: inline-flex;

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

    margin:
        0 0 12px;

    padding:
        6px 13px;

    border:
        1px solid
        rgba(212,175,55,.24);

    border-radius:
        999px;

    background:
        rgba(212,175,55,.035);

    color:
        rgba(224,192,112,.92);

    font-size:
        .68rem;

    font-weight:
        600;

    letter-spacing:
        .18em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


/* =========================================================
   12.13 — CORE TITLE
   ========================================================= */

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

    margin:
        0 0 14px;

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

    font-size:
        clamp(
            1.65rem,
            2.4vw,
            2.35rem
        );

    font-weight:
        600;

    line-height:
        1.12;

    letter-spacing:
        -.025em;

}


/* =========================================================
   12.14 — CORE DESCRIPTION
   ========================================================= */

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

    max-width:
        620px;

    margin:
        0 auto 22px;

    color:
        rgba(207,216,226,.72);

    font-size:
        .94rem;

    line-height:
        1.75;

}


/* =========================================================
   12.15 — CORE CTA
   ========================================================= */

.ars-core-card
.ars-card-action {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(232,199,120,.96);

    font-size:
        .78rem;

    font-weight:
        600;

    letter-spacing:
        .08em;

}


/* =========================================================
   12.16 — CORE CTA LINE
   ========================================================= */

.ars-core-card
.ars-card-action::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom:
        -7px;

    height:
        1px;

    transform:
        scaleX(0);

    transform-origin:
        center;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.72),
            rgba(40,170,255,.50),
            transparent
        );

}


/* =========================================================
   12.17 — CORE HOVER
   ---------------------------------------------------------
   Conservative base hover.
   Section 16 may enhance motion.
   ========================================================= */

@media (hover: hover) {

    .ars-core-card:hover {

        border-color:
            rgba(225,190,101,.66);

        box-shadow:

            0 24px 72px
            rgba(0,0,0,.64),

            0 0 0 1px
            rgba(212,175,55,.08),

            0 0 38px
            rgba(212,175,55,.10),

            0 0 58px
            rgba(40,170,255,.04);

    }

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

        transform:
            scale(1.055);

        filter:
            saturate(.98)
            contrast(1.09)
            brightness(.90);

    }

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

        border-color:
            rgba(232,199,120,.76);

        box-shadow:

            0 0 0 1px
            rgba(255,255,255,.025),

            0 0 27px
            rgba(212,175,55,.26),

            0 0 42px
            rgba(40,170,255,.09),

            inset 0 0 25px
            rgba(0,0,0,.82);

    }

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

        transform:
            scale(1.025);

    }

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

        color:
            rgba(255,224,145,1);

    }

    .ars-core-card:hover
    .ars-card-action::after {

        transform:
            scaleX(1);

    }

}


/* =========================================================
   12.18 — SELECTED STATE
   ---------------------------------------------------------
   State hook only.
   Full Golden Reveal belongs to Section 15.
   ========================================================= */

.ars-core-card.is-selected {

    border-color:
        rgba(238,205,126,.78);

    box-shadow:

        0 26px 82px
        rgba(0,0,0,.68),

        0 0 0 1px
        rgba(212,175,55,.12),

        0 0 40px
        rgba(212,175,55,.15),

        0 0 70px
        rgba(40,170,255,.055);

}


/* =========================================================
   12.19 — FOCUS
   ========================================================= */

.ars-core-card:focus-within {

    outline:
        none;

    border-color:
        rgba(232,199,120,.72);

    box-shadow:

        0 0 0 2px
        rgba(212,175,55,.10),

        0 0 34px
        rgba(212,175,55,.12),

        0 0 55px
        rgba(40,170,255,.04);

}


/* =========================================================
   12.20 — TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .ars-core-card
    .ars-card-image,
    .ars-core-card
    .ars-card-image img {

        min-height:
            250px;

    }

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

        width:
            104px;

        height:
            104px;

        margin-top:
            -46px;

        padding:
            15px;

    }

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

        padding:
            25px 28px 30px;

    }

}


/* =========================================================
   12.21 — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .ars-core-card
    .ars-card-image,
    .ars-core-card
    .ars-card-image img {

        min-height:
            230px;

    }

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

        width:
            94px;

        height:
            94px;

        margin-top:
            -42px;

        padding:
            14px;

    }

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

        padding:
            23px 21px 28px;

    }

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

        font-size:
            1.55rem;

    }

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

        font-size:
            .88rem;

        line-height:
            1.7;

    }

}


/* =========================================================
   12.22 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ars-core-card
    .ars-card-image,
    .ars-core-card
    .ars-card-image img {

        min-height:
            205px;

    }

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

        width:
            84px;

        height:
            84px;

        margin-top:
            -37px;

        padding:
            12px;

    }

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

        padding:
            21px 18px 25px;

    }

    .ars-core-card
    .ars-card-category {

        font-size:
            .61rem;

        letter-spacing:
            .14em;

    }

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

        font-size:
            1.4rem;

    }

}


/* =========================================================
   12.23 — REDUCED MOTION
   ========================================================= */

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

    .ars-core-card,
    .ars-core-card *,
    .ars-core-card::before,
    .ars-core-card::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* =========================================================
   END
   12 — ARS CORE CARD
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   13 — SPECIALIZED CARD IDENTITY ENGINE
   =========================================================
   RESPONSIBILITY
   ---------------------------------------------------------
   Specialized Cards ONLY

   FAMILY A
   ---------------------------------------------------------
   INNER ECOSYSTEM
   6 CARDS
   Cards 02 → 07

   FAMILY B
   ---------------------------------------------------------
   OUTER ECOSYSTEM
   7 CARDS
   Cards 08 → 14

   ARCHITECTURE
   ---------------------------------------------------------
   Core
      ↓
   Inner Ecosystem — 6
      ↓
   ENERGY BRIDGE — controlled by 15
      ↓
   Outer Ecosystem — 7

   IMPORTANT
   ---------------------------------------------------------
   HTML IS LOCKED.
   NO HTML MODIFICATION.

   THIS FILE DOES NOT CONTROL:
   ---------------------------------------------------------
   11 → Layout / Grid Architecture
   12 → Core Card
   14 → Material Engine
   15 → Energy / Golden Reveal
   16 → Motion / Cinematic Animation

   NO:
   transform
   animation
   filter
   box-shadow
   energy glow
   material rendering
   ========================================================= */


/* =========================================================
   13.01 — SPECIALIZED CARD ROOT
   ========================================================= */

.ecosystem .ars-core-grid > .ars-specialized-card {

    position: relative;

    min-width: 0;

    isolation: isolate;

    /*
     * Visual identity only.
     * Geometry remains controlled by Section 11.
     */

}


/* =========================================================
   13.02 — SPECIALIZED CARD LINK
   ========================================================= */

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

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

    min-width: 0;

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   13.03 — INNER FAMILY
   6-CARD INNER ECOSYSTEM
   ---------------------------------------------------------
   Grid children:

   02 → 07
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7) {

    --ars-card-family:
        inner;

    --ars-family-accent:
        rgba(212,175,55,.88);

    --ars-family-accent-soft:
        rgba(212,175,55,.18);

    --ars-family-secondary:
        rgba(40,170,255,.48);

    --ars-family-content:
        rgba(235,239,245,.96);

    --ars-family-muted:
        rgba(205,214,226,.68);

}


/* =========================================================
   13.04 — OUTER FAMILY
   7-CARD OUTER ECOSYSTEM
   ---------------------------------------------------------
   Grid children:

   08 → 14
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14) {

    --ars-card-family:
        outer;

    --ars-family-accent:
        rgba(40,170,255,.86);

    --ars-family-accent-soft:
        rgba(40,170,255,.16);

    --ars-family-secondary:
        rgba(212,175,55,.46);

    --ars-family-content:
        rgba(235,239,245,.94);

    --ars-family-muted:
        rgba(201,213,228,.66);

}


/* =========================================================
   13.05 — INNER IDENTITY
   ---------------------------------------------------------
   Inner family represents:

   Intelligence
   Core capabilities
   Precision
   Controlled technology
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-category {

    color:
        var(--ars-family-accent);

    border-color:
        var(--ars-family-accent-soft);

}


/* =========================================================
   13.06 — OUTER IDENTITY
   ---------------------------------------------------------
   Outer family represents:

   Exploration
   Ecosystem
   Expansion
   Future-facing capabilities
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-category {

    color:
        var(--ars-family-accent);

    border-color:
        var(--ars-family-accent-soft);

}


/* =========================================================
   13.07 — SPECIALIZED IMAGE FRAME
   ---------------------------------------------------------
   Structural image identity ONLY.
   No image animation here.
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-image {

    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   13.08 — INNER IMAGE IDENTITY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-image {

    /*
     * Inner family keeps imagery controlled,
     * concentrated and technology-oriented.
     */

    min-height:
        180px;

}


/* =========================================================
   13.09 — OUTER IMAGE IDENTITY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-image {

    /*
     * Outer family receives slightly more
     * visual breathing room.
     */

    min-height:
        185px;

}


/* =========================================================
   13.10 — SPECIALIZED IMAGE
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    object-fit:
        cover;

}


/* =========================================================
   13.11 — INNER IMAGE CHARACTER
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-image img {

    object-position:
        center;

}


/* =========================================================
   13.12 — OUTER IMAGE CHARACTER
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-image img {

    object-position:
        center;

}


/* =========================================================
   13.13 — SPECIALIZED LOGO PLATFORM
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-logo {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


/* =========================================================
   13.14 — INNER LOGO IDENTITY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-logo {

    /*
     * Inner logos remain compact and precise.
     */

    width:
        78px;

    height:
        78px;

    margin:
        -34px auto 0;

}


/* =========================================================
   13.15 — OUTER LOGO IDENTITY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-logo {

    /*
     * Outer ecosystem receives slightly
     * more visual presence.
     */

    width:
        84px;

    height:
        84px;

    margin:
        -36px auto 0;

}


/* =========================================================
   13.16 — SPECIALIZED LOGO IMAGE
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-logo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* =========================================================
   13.17 — SPECIALIZED CONTENT
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-content {

    position: relative;

    z-index: 2;

    min-width: 0;

}


/* =========================================================
   13.18 — INNER CONTENT
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-content {

    padding:
        20px 22px 25px;

}


/* =========================================================
   13.19 — OUTER CONTENT
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-content {

    padding:
        22px 23px 27px;

}


/* =========================================================
   13.20 — SPECIALIZED CATEGORY
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-category {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    max-width:
        100%;

    margin-bottom:
        10px;

    padding:
        5px 11px;

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    background:
        transparent;

    font-size:
        .63rem;

    font-weight:
        600;

    letter-spacing:
        .15em;

    line-height:
        1.3;

    text-transform:
        uppercase;

}


/* =========================================================
   13.21 — SPECIALIZED TITLE
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-content h3 {

    margin:
        0 0 10px;

    color:
        var(--ars-family-content);

    font-size:
        clamp(
            1.05rem,
            1.45vw,
            1.38rem
        );

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        -.018em;

}


/* =========================================================
   13.22 — SPECIALIZED DESCRIPTION
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-content p {

    max-width:
        100%;

    margin:
        0 0 17px;

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

    font-size:
        .82rem;

    line-height:
        1.7;

}


/* =========================================================
   13.23 — SPECIALIZED CTA
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-action {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--ars-family-accent);

    font-size:
        .7rem;

    font-weight:
        600;

    letter-spacing:
        .07em;

}


/* =========================================================
   13.24 — INNER CTA IDENTITY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-action {

    color:
        rgba(232,199,120,.94);

}


/* =========================================================
   13.25 — OUTER CTA IDENTITY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-action {

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

}


/* =========================================================
   13.26 — FAMILY SEPARATION MARKER
   ---------------------------------------------------------
   This creates NO energy effect.

   It only establishes the logical boundary
   between the two card families.

   Actual Energy Bridge:
   Section 15 ONLY.
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(8) {

    --ars-family-boundary:
        outer;

}


/* =========================================================
   13.27 — INNER FAMILY CONSISTENCY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-link {

    min-height:
        100%;

}


/* =========================================================
   13.28 — OUTER FAMILY CONSISTENCY
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-link {

    min-height:
        100%;

}


/* =========================================================
   13.29 — TABLET IDENTITY
   ========================================================= */

@media (max-width: 1100px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card
    .ars-card-image {

        min-height:
            175px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
    .ars-card-logo {

        width:
            74px;

        height:
            74px;

        margin-top:
            -31px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
    .ars-card-logo {

        width:
            78px;

        height:
            78px;

        margin-top:
            -33px;

    }

}


/* =========================================================
   13.30 — TABLET PORTRAIT
   ========================================================= */

@media (max-width: 820px) {

    .ecosystem .ars-specialized-card
    .ars-card-content {

        padding:
            19px 19px 23px;

    }

    .ecosystem .ars-specialized-card
    .ars-card-content h3 {

        font-size:
            1.08rem;

    }

    .ecosystem .ars-specialized-card
    .ars-card-content p {

        font-size:
            .8rem;

    }

}


/* =========================================================
   13.31 — MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card
    .ars-card-image {

        min-height:
            190px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
    .ars-card-logo {

        width:
            76px;

        height:
            76px;

        margin-top:
            -32px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
    .ars-card-logo {

        width:
            80px;

        height:
            80px;

        margin-top:
            -34px;

    }

    .ecosystem .ars-specialized-card
    .ars-card-content {

        padding:
            19px 19px 24px;

    }

}


/* =========================================================
   13.32 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card
    .ars-card-image {

        min-height:
            175px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
    .ars-card-logo {

        width:
            68px;

        height:
            68px;

        margin-top:
            -29px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
    .ars-card-logo {

        width:
            72px;

        height:
            72px;

        margin-top:
            -31px;

    }

    .ecosystem .ars-specialized-card
    .ars-card-content {

        padding:
            17px 17px 21px;

    }

    .ecosystem .ars-specialized-card
    .ars-card-content h3 {

        font-size:
            1rem;

    }

    .ecosystem .ars-specialized-card
    .ars-card-content p {

        font-size:
            .77rem;

        line-height:
            1.65;

    }

}


/* =========================================================
   13.33 — VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card
    .ars-card-image {

        min-height:
            160px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
    .ars-card-logo {

        width:
            62px;

        height:
            62px;

        margin-top:
            -26px;

    }

    .ecosystem .ars-core-grid
    > .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
    .ars-card-logo {

        width:
            66px;

        height:
            66px;

        margin-top:
            -28px;

    }

}


/* =========================================================
   13.34 — TOUCH SAFETY
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

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

        -webkit-tap-highlight-color:
            transparent;

    }

}


/* =========================================================
   13.35 — ACCESSIBILITY
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-link:focus-visible {

    outline:
        2px solid
        var(--ars-family-accent);

    outline-offset:
        4px;

}


/* =========================================================
   13.36 — REDUCED MOTION
   ---------------------------------------------------------
   Section 13 itself contains no animation.
   This block exists only to guarantee that
   future inherited motion cannot alter identity rules.
   ========================================================= */

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

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

        scroll-behavior:
            auto;

    }

}


/* =========================================================
   13.37 — HARD SCOPE LOCK
   ---------------------------------------------------------
   Specialized identity only.

   Energy:
   15

   Material:
   14

   Motion:
   16

   Layout:
   11

   Core:
   12
   ========================================================= */

.ecosystem .ars-specialized-card {

    /*
     * No transform.
     * No animation.
     * No filter.
     * No box-shadow.
     * No energy pseudo-element.
     *
     * These are intentionally absent.
     */

}


/* =========================================================
   END OF
   13 — SPECIALIZED CARD IDENTITY ENGINE
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   14 — CARD MATERIAL ENGINE
   =========================================================
   MASTER MATERIAL SYSTEM
   ---------------------------------------------------------
   RESPONSIBILITY:

   • Glass Surface
   • Material Depth
   • Surface Transparency
   • Border Material
   • Inner / Outer Material Identity
   • Image Surface Protection
   • Content Surface Separation
   • Material Responsive Behavior

   ARCHITECTURE LOCK
   ---------------------------------------------------------
   11 → Architecture / Layout
   12 → Core Card
   13 → Specialized Identity
   14 → MATERIAL — THIS FILE
   15 → Energy / Golden Reveal / Energy Bridge
   16 → Motion / Cinematic Animation

   IMPORTANT
   ---------------------------------------------------------
   HTML IS LOCKED.
   NO HTML MODIFICATION.

   THIS FILE DOES NOT CONTROL:
   ---------------------------------------------------------
   • Grid geometry
   • Card positioning
   • Card animation
   • Hover movement
   • Selected state
   • Active state
   • Energy radiation
   • Golden reveal
   • Blue reveal
   • Energy bridge
   • Transform animation

   ========================================================= */


/* =========================================================
   14.01 — MATERIAL ROOT
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card {

    /*
     * Material variables only.
     *
     * These variables are intentionally local to
     * specialized cards and do not modify layout
     * or motion variables.
     */

    --material-bg:
        rgba(7, 11, 18, .82);

    --material-bg-deep:
        rgba(3, 6, 11, .94);

    --material-border:
        rgba(255,255,255,.085);

    --material-border-soft:
        rgba(255,255,255,.045);

    --material-highlight:
        rgba(255,255,255,.065);

    --material-inset:
        rgba(0,0,0,.34);

    --material-opacity:
        1;

    --material-blur:
        18px;

}


/* =========================================================
   14.02 — INNER MATERIAL
   6-CARD INNER ECOSYSTEM
   ---------------------------------------------------------
   Cards 02 → 07
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7) {

    --material-bg:
        rgba(8, 13, 21, .84);

    --material-bg-deep:
        rgba(3, 7, 13, .95);

    --material-border:
        rgba(212,175,55,.16);

    --material-border-soft:
        rgba(255,255,255,.045);

    --material-highlight:
        rgba(212,175,55,.055);

    --material-inset:
        rgba(0,0,0,.36);

}


/* =========================================================
   14.03 — OUTER MATERIAL
   7-CARD OUTER ECOSYSTEM
   ---------------------------------------------------------
   Cards 08 → 14
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14) {

    --material-bg:
        rgba(6, 12, 21, .84);

    --material-bg-deep:
        rgba(2, 7, 14, .95);

    --material-border:
        rgba(40,170,255,.14);

    --material-border-soft:
        rgba(255,255,255,.045);

    --material-highlight:
        rgba(40,170,255,.045);

    --material-inset:
        rgba(0,0,0,.38);

}


/* =========================================================
   14.04 — MATERIAL SURFACE
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card {

    background:
        linear-gradient(
            145deg,
            var(--material-bg),
            var(--material-bg-deep)
        );

    border:
        1px solid
        var(--material-border);

    /*
     * Material shadow only.
     *
     * No gold/blue energy glow here.
     * Energy belongs exclusively to Section 15.
     */

    box-shadow:
        inset 0 1px 0
        var(--material-highlight),

        inset 0 0 0 1px
        var(--material-inset);

}


/* =========================================================
   14.05 — MATERIAL GLASS FIELD
   ---------------------------------------------------------
   Surface layer only.
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            transparent 24%,
            transparent 72%,
            rgba(255,255,255,.018)
        );

    opacity:
        var(--material-opacity);

}


/* =========================================================
   14.06 — MATERIAL EDGE
   ---------------------------------------------------------
   Pure material edge.
   No energy sweep.
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    z-index:
        0;

    pointer-events:
        none;

    border:
        1px solid
        var(--material-border-soft);

    border-radius:
        inherit;

    opacity:
        .75;

}


/* =========================================================
   14.07 — CONTENT LAYERING
   ========================================================= */

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

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   14.08 — IMAGE MATERIAL PROTECTION
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-image {

    position:
        relative;

    z-index:
        1;

    isolation:
        isolate;

}


/* =========================================================
   14.09 — IMAGE SURFACE
   ---------------------------------------------------------
   No animation.
   No zoom.
   No filter transition.
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-image img {

    position:
        relative;

    z-index:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    backface-visibility:
        hidden;

}


/* =========================================================
   14.10 — IMAGE MATERIAL VEIL
   ---------------------------------------------------------
   A static material layer.
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 34%,
            rgba(0,0,0,.14) 78%,
            rgba(0,0,0,.32)
        );

}


/* =========================================================
   14.11 — IMAGE LOWER MATERIAL SEAL
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-image::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        28%;

    z-index:
        3;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(2,5,10,.52)
        );

}


/* =========================================================
   14.12 — LOGO MATERIAL PLATFORM
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-logo {

    position:
        relative;

    z-index:
        4;

    background:
        radial-gradient(
            circle,
            rgba(10,16,25,.98),
            rgba(4,8,14,.96) 68%,
            rgba(2,4,8,.94)
        );

    border:
        1px solid
        var(--material-border);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.055),

        inset 0 0 18px
        rgba(0,0,0,.52);

}


/* =========================================================
   14.13 — INNER LOGO MATERIAL
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-logo {

    border-color:
        rgba(212,175,55,.20);

}


/* =========================================================
   14.14 — OUTER LOGO MATERIAL
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-logo {

    border-color:
        rgba(40,170,255,.18);

}


/* =========================================================
   14.15 — LOGO IMAGE SURFACE
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-logo img {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* =========================================================
   14.16 — CONTENT MATERIAL SEPARATION
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-content {

    position:
        relative;

    z-index:
        4;

}


/* =========================================================
   14.17 — CONTENT TOP SEPARATOR
   ---------------------------------------------------------
   Static material line only.
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-content::before {

    content:
        "";

    position:
        absolute;

    left:
        12%;

    right:
        12%;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--material-border),
            transparent
        );

    opacity:
        .65;

}


/* =========================================================
   14.18 — INNER CONTENT MATERIAL
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7)
.ars-card-content {

    background:
        linear-gradient(
            180deg,
            rgba(212,175,55,.012),
            transparent 28%
        );

}


/* =========================================================
   14.19 — OUTER CONTENT MATERIAL
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14)
.ars-card-content {

    background:
        linear-gradient(
            180deg,
            rgba(40,170,255,.012),
            transparent 28%
        );

}


/* =========================================================
   14.20 — MATERIAL TEXT HIERARCHY
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-content h3 {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   14.21 — MATERIAL CTA SURFACE
   ========================================================= */

.ecosystem .ars-specialized-card
.ars-card-action {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   14.22 — INNER MATERIAL CHARACTER
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+2):nth-child(-n+7) {

    background:
        linear-gradient(
            145deg,
            rgba(10,15,23,.88),
            rgba(3,7,13,.96)
        );

}


/* =========================================================
   14.23 — OUTER MATERIAL CHARACTER
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card:nth-child(n+8):nth-child(-n+14) {

    background:
        linear-gradient(
            145deg,
            rgba(7,14,23,.88),
            rgba(2,7,14,.96)
        );

}


/* =========================================================
   14.24 — MATERIAL STATE
   ---------------------------------------------------------
   IMPORTANT:

   These states DO NOT animate.
   They only slightly change material opacity.

   Energy state belongs to 15.
   Motion state belongs to 16.
   ========================================================= */

.ecosystem .ars-specialized-card.is-selected {

    --material-opacity:
        1;

}


.ecosystem .ars-specialized-card.is-active {

    --material-opacity:
        .98;

}


/* =========================================================
   14.25 — ENERGY-FADING MATERIAL SAFETY
   ---------------------------------------------------------
   No energy logic.
   Only material remains stable while
   Section 15 performs energy decay.
   ========================================================= */

.ecosystem .ars-specialized-card.energy-fading {

    --material-opacity:
        .92;

}


/* =========================================================
   14.26 — TABLET MATERIAL
   ========================================================= */

@media (max-width: 1100px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card {

        --material-blur:
            14px;

    }

}


/* =========================================================
   14.27 — MOBILE MATERIAL
   ========================================================= */

@media (max-width: 680px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card {

        --material-bg:
            rgba(6,11,18,.90);

        --material-bg-deep:
            rgba(2,6,11,.97);

        --material-opacity:
            1;

    }

}


/* =========================================================
   14.28 — SMALL MOBILE MATERIAL
   ========================================================= */

@media (max-width: 480px) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card {

        --material-border-soft:
            rgba(255,255,255,.04);

    }

}


/* =========================================================
   14.29 — TOUCH SAFETY
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .ecosystem .ars-core-grid
    > .ars-specialized-card::before,
    .ecosystem .ars-core-grid
    > .ars-specialized-card::after {

        pointer-events:
            none;

    }

}


/* =========================================================
   14.30 — REDUCED MOTION SAFETY
   ---------------------------------------------------------
   Section 14 intentionally has no animations.
   ========================================================= */

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

    .ecosystem .ars-core-grid
    > .ars-specialized-card {

        transition:
            none !important;

    }

}


/* =========================================================
   14.31 — HARD MATERIAL SCOPE LOCK
   ---------------------------------------------------------
   Deliberately NO:

   transform
   animation
   @keyframes
   filter
   hover movement
   hover zoom
   energy sweep
   golden reveal
   blue reveal
   energy bridge
   ========================================================= */

.ecosystem .ars-core-grid
> .ars-specialized-card {

    /*
     * MATERIAL ONLY.
     *
     * Section 15 owns ENERGY.
     * Section 16 owns MOTION.
     */

}


/* =========================================================
   END OF
   14 — CARD MATERIAL ENGINE
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   15 — ENERGY / GOLDEN REVEAL ENGINE
   =========================================================
   RESPONSIBILITY
   ---------------------------------------------------------
   GOLDEN REVEAL
   BLUE ENERGY
   ENERGY BRIDGE
   BORDER RADIATION
   IMAGE ILLUMINATION
   LOGO / BRIDGE ILLUMINATION
   SELECTED STATE
   ACTIVE STATE
   ENERGY DECAY

   ARCHITECTURE
   ---------------------------------------------------------
   11 = Architecture / Layout
   12 = Core Card
   13 = Specialized Cards / Inner + Outer Identity
   14 = Material Engine
   15 = Energy / Golden Reveal
   16 = Motion / Cinematic Animation

   IMPORTANT
   ---------------------------------------------------------
   HTML IS NOT MODIFIED.

   THIS FILE DOES NOT CONTROL:
   - GRID
   - CARD GEOMETRY
   - CARD MATERIAL
   - GLASS SURFACE
   - PRIMARY TRANSFORM
   - CINEMATIC MOTION

   THOSE RESPONSIBILITIES BELONG TO:
   11 / 12 / 13 / 14 / 16

   JS STATES:
   .is-selected
   .is-active
   .energy-fading

   TWO-LAYER SYSTEM
   ---------------------------------------------------------
   The energy system visually connects the upper visual
   layer and lower content layer without taking ownership
   of their geometry.

   ENERGY BRIDGE
   ---------------------------------------------------------
   The bridge is created through the existing card content
   hierarchy and logo field. No new HTML is required.
   ========================================================= */


/* =========================================================
   15.01 — ENERGY ROOT
   ========================================================= */

.ars-glass-card {

    --ars-energy-opacity: 0;

    --ars-energy-gold:
        rgba(212, 175, 55, 1);

    --ars-energy-gold-soft:
        rgba(212, 175, 55, .42);

    --ars-energy-blue:
        rgba(40, 170, 255, 1);

    --ars-energy-blue-soft:
        rgba(40, 170, 255, .34);

    --ars-energy-white:
        rgba(255, 255, 255, .82);

    --ars-energy-x:
        50%;

    --ars-energy-y:
        50%;

    --ars-energy-radius:
        68%;

}


/* =========================================================
   15.02 — ENERGY FIELD
   ---------------------------------------------------------
   Uses the existing card surface without replacing
   the Material Engine background.
   ========================================================= */

.ars-glass-card {

    box-shadow:
        0 0 0 1px
        rgba(212, 175, 55, 0)
        inset;

}


/* =========================================================
   15.03 — SELECTED ENERGY FIELD
   ========================================================= */

.ars-glass-card.is-selected {

    --ars-energy-opacity: 1;

    box-shadow:

        0 0 0 1px
        rgba(212, 175, 55, .22),

        0 0 26px
        rgba(212, 175, 55, .16),

        0 0 62px
        rgba(212, 175, 55, .10),

        0 24px 70px
        rgba(0, 0, 0, .48);

}


/* =========================================================
   15.04 — ACTIVE BLUE ENERGY
   ========================================================= */

.ars-glass-card.is-active {

    --ars-energy-opacity: 1;

    box-shadow:

        0 0 0 1px
        rgba(40, 170, 255, .16),

        0 0 24px
        rgba(40, 170, 255, .14),

        0 0 56px
        rgba(40, 170, 255, .08),

        0 24px 70px
        rgba(0, 0, 0, .44);

}


/* =========================================================
   15.05 — SELECTED + ACTIVE HYBRID
   ========================================================= */

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

    box-shadow:

        0 0 0 1px
        rgba(212, 175, 55, .30),

        0 0 28px
        rgba(212, 175, 55, .20),

        0 0 52px
        rgba(40, 170, 255, .12),

        0 0 88px
        rgba(212, 175, 55, .08),

        0 28px 78px
        rgba(0, 0, 0, .54);

}


/* =========================================================
   15.06 — TWO-LAYER ENERGY BRIDGE
   ---------------------------------------------------------
   The bridge belongs to the existing content layer.
   It does NOT create new layout or geometry.

   The bridge visually connects:
   IMAGE / UPPER LAYER
                ↓
          ENERGY FIELD
                ↓
   LOGO / CONTENT TRANSITION
                ↓
        LOWER CONTENT LAYER
   ========================================================= */

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

    position: relative;

}


/* =========================================================
   15.07 — ENERGY BRIDGE FOUNDATION
   ---------------------------------------------------------
   A very restrained field at the transition point.
   ========================================================= */

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

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    top: 0;

    height: 1px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(40, 170, 255, .08) 18%,
            rgba(212, 175, 55, .12) 38%,
            rgba(255, 255, 255, .18) 50%,
            rgba(212, 175, 55, .12) 62%,
            rgba(40, 170, 255, .08) 82%,
            transparent 100%
        );

    box-shadow:
        0 0 14px
        rgba(212, 175, 55, .08);

    transition:
        opacity .7s ease,
        box-shadow .7s ease;

}


/* =========================================================
   15.08 — GOLDEN ENERGY BRIDGE
   ========================================================= */

.ars-glass-card.is-selected
.ars-card-content::before {

    opacity: .95;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(40, 170, 255, .10) 14%,
            rgba(212, 175, 55, .34) 34%,
            rgba(255, 255, 255, .52) 50%,
            rgba(212, 175, 55, .34) 66%,
            rgba(40, 170, 255, .10) 86%,
            transparent 100%
        );

    box-shadow:
        0 0 18px
        rgba(212, 175, 55, .18),

        0 0 30px
        rgba(40, 170, 255, .06);

}


/* =========================================================
   15.09 — BLUE ENERGY BRIDGE
   ========================================================= */

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

    opacity: .78;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(40, 170, 255, .34) 32%,
            rgba(255, 255, 255, .30) 50%,
            rgba(40, 170, 255, .34) 68%,
            transparent
        );

    box-shadow:
        0 0 16px
        rgba(40, 170, 255, .14);

}


/* =========================================================
   15.10 — HYBRID ENERGY BRIDGE
   ========================================================= */

.ars-glass-card.is-selected.is-active
.ars-card-content::before {

    opacity: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(40, 170, 255, .18) 20%,
            rgba(212, 175, 55, .42) 38%,
            rgba(255, 255, 255, .62) 50%,
            rgba(212, 175, 55, .42) 62%,
            rgba(40, 170, 255, .18) 80%,
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(212, 175, 55, .18),

        0 0 34px
        rgba(40, 170, 255, .08);

}


/* =========================================================
   15.11 — LOGO / BRIDGE ENERGY
   ========================================================= */

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

    position: relative;

}


/* =========================================================
   15.12 — GOLDEN LOGO FIELD
   ========================================================= */

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

    filter:
        drop-shadow(
            0 0 10px
            rgba(212, 175, 55, .34)
        )

        drop-shadow(
            0 0 22px
            rgba(212, 175, 55, .12)
        );

}


/* =========================================================
   15.13 — BLUE LOGO FIELD
   ========================================================= */

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

    filter:
        drop-shadow(
            0 0 10px
            rgba(40, 170, 255, .30)
        )

        drop-shadow(
            0 0 20px
            rgba(40, 170, 255, .10)
        );

}


/* =========================================================
   15.14 — HYBRID LOGO FIELD
   ========================================================= */

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

    filter:
        drop-shadow(
            0 0 10px
            rgba(212, 175, 55, .42)
        )

        drop-shadow(
            0 0 22px
            rgba(40, 170, 255, .16)
        );

}


/* =========================================================
   15.15 — LOGO IMAGE ILLUMINATION
   ========================================================= */

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

    transition:
        filter .65s ease;

}


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

    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(
            0 0 10px
            rgba(212, 175, 55, .32)
        );

}


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

    filter:
        brightness(1.06)
        saturate(1.06)
        drop-shadow(
            0 0 10px
            rgba(40, 170, 255, .28)
        );

}


/* =========================================================
   15.16 — IMAGE ENERGY
   ========================================================= */

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

    transition:
        filter .75s ease;

}


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

    filter:
        brightness(1.08)
        contrast(1.05)
        saturate(1.06);

}


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

    filter:
        brightness(1.055)
        contrast(1.04)
        saturate(1.04);

}


/* =========================================================
   15.17 — GOLDEN CATEGORY REVEAL
   ========================================================= */

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

    color:
        rgba(238, 207, 132, .98);

    text-shadow:
        0 0 12px
        rgba(212, 175, 55, .22);

}


/* =========================================================
   15.18 — BLUE CATEGORY REVEAL
   ========================================================= */

.ars-glass-card.is-active
.ars-card-category {

    text-shadow:
        0 0 12px
        rgba(40, 170, 255, .22);

}


/* =========================================================
   15.19 — GOLDEN CTA ENERGY
   ========================================================= */

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

    color:
        rgba(255, 232, 166, .98);

    text-shadow:
        0 0 13px
        rgba(212, 175, 55, .28);

}


/* =========================================================
   15.20 — ACTIVE CTA ENERGY
   ========================================================= */

.ars-glass-card.is-active
.ars-card-action {

    text-shadow:
        0 0 13px
        rgba(40, 170, 255, .24);

}


/* =========================================================
   15.21 — ENERGY SWEEP
   ---------------------------------------------------------
   Applied to the existing image layer rather than
   card pseudo-elements, keeping Material Engine isolated.
   ========================================================= */

.ars-glass-card
.ars-card-image {

    position: relative;

    overflow: hidden;

}


/* =========================================================
   15.22 — IMAGE ENERGY SWEEP LAYER
   ========================================================= */

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

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            115deg,
            transparent 22%,
            rgba(40, 170, 255, .04) 40%,
            rgba(255, 255, 255, .16) 49%,
            rgba(212, 175, 55, .20) 51%,
            rgba(40, 170, 255, .05) 60%,
            transparent 78%
        );

    transform:
        translateX(-115%);

}


/* =========================================================
   15.23 — SELECTED IMAGE REVEAL
   ========================================================= */

.ars-glass-card.is-selected
.ars-card-image::after {

    opacity: 1;

    animation:
        arsGoldenImageReveal
        1.35s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

}


@keyframes arsGoldenImageReveal {

    0% {

        transform:
            translateX(-115%);

    }

    100% {

        transform:
            translateX(115%);

    }

}


/* =========================================================
   15.24 — ACTIVE IMAGE REVEAL
   ========================================================= */

.ars-glass-card.is-active:not(.is-selected)
.ars-card-image::after {

    opacity: .72;

    background:
        linear-gradient(
            115deg,
            transparent 24%,
            rgba(40, 170, 255, .06) 43%,
            rgba(255, 255, 255, .12) 50%,
            rgba(40, 170, 255, .13) 56%,
            transparent 76%
        );

    animation:
        arsBlueImageReveal
        1.45s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

}


@keyframes arsBlueImageReveal {

    0% {

        transform:
            translateX(-115%);

    }

    100% {

        transform:
            translateX(115%);

    }

}


/* =========================================================
   15.25 — GOLDEN ENERGY BREATH
   ---------------------------------------------------------
   Energy only.
   No card transform.
   No layout movement.
   ========================================================= */

.ars-glass-card.is-selected
.ars-card-content::before {

    animation:
        arsGoldenBridgeBreath
        3.8s
        ease-in-out
        infinite;

}


@keyframes arsGoldenBridgeBreath {

    0%,
    100% {

        opacity:
            .72;

    }

    50% {

        opacity:
            1;

    }

}


/* =========================================================
   15.26 — BLUE ENERGY BREATH
   ========================================================= */

.ars-glass-card.is-active:not(.is-selected)
.ars-card-content::before {

    animation:
        arsBlueBridgeBreath
        4.4s
        ease-in-out
        infinite;

}


@keyframes arsBlueBridgeBreath {

    0%,
    100% {

        opacity:
            .58;

    }

    50% {

        opacity:
            .88;

    }

}


/* =========================================================
   15.27 — CORE ENERGY AUTHORITY
   ========================================================= */

.ars-core-card.is-selected {

    --ars-energy-opacity: 1;

    box-shadow:

        0 0 0 1px
        rgba(212, 175, 55, .30),

        0 0 32px
        rgba(212, 175, 55, .22),

        0 0 76px
        rgba(212, 175, 55, .12),

        0 28px 82px
        rgba(0, 0, 0, .58);

}


/* =========================================================
   15.28 — SPECIALIZED INNER GOLD
   ========================================================= */

.ars-specialized-card.is-selected {

    box-shadow:

        0 0 0 1px
        rgba(212, 175, 55, .22),

        0 0 24px
        rgba(212, 175, 55, .15),

        0 0 52px
        rgba(212, 175, 55, .08),

        0 22px 64px
        rgba(0, 0, 0, .46);

}


/* =========================================================
   15.29 — SPECIALIZED OUTER BLUE
   ========================================================= */

.ars-specialized-card.is-active {

    box-shadow:

        0 0 0 1px
        rgba(40, 170, 255, .14),

        0 0 22px
        rgba(40, 170, 255, .12),

        0 0 48px
        rgba(40, 170, 255, .07),

        0 22px 64px
        rgba(0, 0, 0, .44);

}


/* =========================================================
   15.30 — INNER / OUTER HYBRID
   ========================================================= */

.ars-specialized-card.is-selected.is-active {

    box-shadow:

        0 0 0 1px
        rgba(212, 175, 55, .27),

        0 0 26px
        rgba(212, 175, 55, .18),

        0 0 50px
        rgba(40, 170, 255, .10),

        0 24px 68px
        rgba(0, 0, 0, .50);

}


/* =========================================================
   15.31 — POINTER ENERGY FIELD
   ========================================================= */

@media (hover: hover) {

    .ars-glass-card:hover {

        --ars-energy-x:
            50%;

        --ars-energy-y:
            42%;

    }

}


/* =========================================================
   15.32 — HOVER ENERGY
   ---------------------------------------------------------
   Hover provides only a restrained energy response.
   Motion remains owned by File 16.
   ========================================================= */

@media (hover: hover) {

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

        text-shadow:
            0 0 10px
            rgba(212, 175, 55, .16);

    }

}


/* =========================================================
   15.33 — ENERGY DECAY
   ========================================================= */

.ars-glass-card.energy-fading {

    box-shadow:
        0 0 0 1px
        rgba(212, 175, 55, .06),

        0 0 18px
        rgba(212, 175, 55, .05),

        0 20px 60px
        rgba(0, 0, 0, .42);

}


/* =========================================================
   15.34 — ENERGY DECAY BRIDGE
   ========================================================= */

.ars-glass-card.energy-fading
.ars-card-content::before {

    opacity:
        .22;

    animation:
        none;

}


/* =========================================================
   15.35 — ENERGY DECAY LOGO
   ========================================================= */

.ars-glass-card.energy-fading
.ars-card-logo {

    filter:
        none;

}


/* =========================================================
   15.36 — ENERGY DECAY IMAGE
   ========================================================= */

.ars-glass-card.energy-fading
.ars-card-image::after {

    opacity:
        0;

    animation:
        none;

}


/* =========================================================
   15.37 — TOUCH ENERGY
   ========================================================= */

@media (hover: none) {

    .ars-glass-card.is-selected
    .ars-card-content::before {

        opacity:
            .82;

    }

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

        opacity:
            .62;

    }

}


/* =========================================================
   15.38 — MOBILE ENERGY SCALE
   ========================================================= */

@media (max-width: 768px) {

    .ars-glass-card.is-selected {

        box-shadow:

            0 0 0 1px
            rgba(212, 175, 55, .20),

            0 0 22px
            rgba(212, 175, 55, .12),

            0 18px 52px
            rgba(0, 0, 0, .46);

    }

    .ars-glass-card.is-active {

        box-shadow:

            0 0 0 1px
            rgba(40, 170, 255, .12),

            0 0 20px
            rgba(40, 170, 255, .10),

            0 18px 52px
            rgba(0, 0, 0, .44);

    }

}


/* =========================================================
   15.39 — REDUCED MOTION
   ========================================================= */

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

    .ars-glass-card
    .ars-card-content::before,
    .ars-glass-card
    .ars-card-image::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}


/* =========================================================
   15.40 — ENERGY CONTAINMENT
   ---------------------------------------------------------
   No transform ownership.
   No geometry ownership.
   No material ownership.
   ========================================================= */

.ars-glass-card
.ars-card-content::before,
.ars-glass-card
.ars-card-image::after {

    will-change:
        opacity,
        transform;

}


/* =========================================================
   END OF
   15 — ENERGY / GOLDEN REVEAL ENGINE
   ========================================================= */

/* =========================================================
   ARS HERITAGE GROUP — HOME
   16 — MOTION / CINEMATIC ANIMATION ENGINE
   =========================================================
   RESPONSIBILITY
   ---------------------------------------------------------
   CARD MOTION
   CINEMATIC ENTRANCE
   HOVER ELEVATION
   IMAGE DEPTH MOTION
   LOGO FLOAT
   CONTENT MICRO-MOTION
   CTA MOTION
   SELECTED DEPTH
   ACTIVE DEPTH
   FAMILY A / FAMILY B MOTION
   STAGGER
   MOBILE MOTION
   REDUCED MOTION

   ARCHITECTURE
   ---------------------------------------------------------
   11 = Architecture / Layout
   12 = Core Card
   13 = Specialized Cards / Inner + Outer Identity
   14 = Material Engine
   15 = Energy / Golden Reveal
   16 = Motion / Cinematic Animation

   IMPORTANT
   ---------------------------------------------------------
   HTML IS NOT MODIFIED.

   THIS FILE DOES NOT CONTROL:
   - GRID
   - WIDTH / HEIGHT
   - CARD MATERIAL
   - GLASS SURFACE
   - ENERGY / GOLDEN REVEAL
   - ENERGY BRIDGE
   - BORDER RADIATION

   THOSE RESPONSIBILITIES BELONG TO:
   11 / 12 / 13 / 14 / 15

   JS STATES COMPATIBLE:
   .is-visible
   .is-selected
   .is-active
   .energy-fading

   ========================================================= */


/* =========================================================
   16.01 — MOTION VARIABLES
   ---------------------------------------------------------
   Motion variables are isolated from Energy variables.
   ========================================================= */

.ars-glass-card {

    --ars-motion-y:
        0px;

    --ars-motion-scale:
        1;

    --ars-motion-rotate-x:
        0deg;

    --ars-motion-rotate-y:
        0deg;

    --ars-motion-image-scale:
        1;

    --ars-motion-logo-y:
        0px;

    --ars-motion-content-y:
        0px;

    --ars-motion-duration:
        .75s;

    --ars-motion-ease:
        cubic-bezier(.16, 1, .3, 1);

}


/* =========================================================
   16.02 — BASE MOTION
   ---------------------------------------------------------
   File 16 owns the card transform.
   ========================================================= */

.ars-glass-card {

    transform:
        translate3d(
            0,
            var(--ars-motion-y),
            0
        )
        rotateX(
            var(--ars-motion-rotate-x)
        )
        rotateY(
            var(--ars-motion-rotate-y)
        )
        scale(
            var(--ars-motion-scale)
        );

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;

    transition:
        transform
            var(--ars-motion-duration)
            var(--ars-motion-ease);

}


/* =========================================================
   16.03 — CINEMATIC ENTRANCE
   ========================================================= */

.ars-glass-card {

    opacity:
        0;

    filter:
        blur(10px)
        brightness(.78);

    transform:
        translate3d(
            0,
            42px,
            0
        )
        scale(.975);

}


/* =========================================================
   16.04 — VISIBLE STATE
   ========================================================= */

.ars-glass-card.is-visible {

    opacity:
        1;

    filter:
        blur(0)
        brightness(1);

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    transition:
        opacity
            .85s
            ease,

        filter
            .9s
            var(--ars-motion-ease),

        transform
            .9s
            var(--ars-motion-ease);

}


/* =========================================================
   16.05 — FALLBACK VISIBILITY
   ---------------------------------------------------------
   Prevents invisible cards if reveal JS is absent.
   ========================================================= */

.ars-glass-card:not(.is-visible) {

    animation:
        arsMotionFallbackReveal
        1ms
        forwards;

}


@keyframes arsMotionFallbackReveal {

    to {

        opacity:
            1;

        filter:
            none;

    }

}


/* =========================================================
   16.06 — DESKTOP HOVER ELEVATION
   ========================================================= */

@media (hover: hover) {

    .ars-glass-card:hover {

        --ars-motion-y:
            -10px;

        --ars-motion-scale:
            1.012;

        --ars-motion-rotate-x:
            .18deg;

        --ars-motion-rotate-y:
            -.18deg;

        z-index:
            20;

    }

}


/* =========================================================
   16.07 — IMAGE DEPTH
   ========================================================= */

.ars-card-image img {

    transform:
        scale(
            var(--ars-motion-image-scale)
        );

    transition:
        transform
            1.15s
            var(--ars-motion-ease);

    backface-visibility:
        hidden;

}


/* =========================================================
   16.08 — IMAGE HOVER CINEMATIC ZOOM
   ========================================================= */

@media (hover: hover) {

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

        --ars-motion-image-scale:
            1.055;

        transform:
            scale(1.055);

    }

}


/* =========================================================
   16.09 — IMAGE PARALLAX DEPTH
   ========================================================= */

@media (hover: hover) {

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

        transform:
            translateZ(3px);

    }

}


/* =========================================================
   16.10 — LOGO MOTION
   ========================================================= */

.ars-card-logo {

    transform:
        translate3d(
            0,
            var(--ars-motion-logo-y),
            0
        );

    transition:
        transform
            .7s
            var(--ars-motion-ease);

    backface-visibility:
        hidden;

}


/* =========================================================
   16.11 — LOGO HOVER FLOAT
   ========================================================= */

@media (hover: hover) {

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

        --ars-motion-logo-y:
            -5px;

        transform:
            translate3d(
                0,
                -5px,
                0
            );

    }

}


/* =========================================================
   16.12 — CONTENT MICRO-LIFT
   ========================================================= */

.ars-card-content {

    transform:
        translate3d(
            0,
            var(--ars-motion-content-y),
            0
        );

    transition:
        transform
            .65s
            var(--ars-motion-ease);

}


/* =========================================================
   16.13 — CONTENT HOVER
   ========================================================= */

@media (hover: hover) {

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

        --ars-motion-content-y:
            -3px;

    }

}


/* =========================================================
   16.14 — CATEGORY MOTION
   ========================================================= */

.ars-card-category {

    transition:
        transform
            .55s
            var(--ars-motion-ease);

}


@media (hover: hover) {

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

        transform:
            translateX(3px);

    }

}


/* =========================================================
   16.15 — TITLE MICRO MOTION
   ========================================================= */

.ars-card-content h3 {

    transition:
        transform
            .55s
            var(--ars-motion-ease);

}


@media (hover: hover) {

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

        transform:
            translateX(2px);

    }

}


/* =========================================================
   16.16 — CTA CINEMATIC MOTION
   ========================================================= */

.ars-card-action {

    transition:
        transform
            .55s
            var(--ars-motion-ease),

        letter-spacing
            .45s
            ease;

}


@media (hover: hover) {

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

        transform:
            translateX(6px);

        letter-spacing:
            .018em;

    }

}


/* =========================================================
   16.17 — SELECTED CARD DEPTH
   ---------------------------------------------------------
   Motion only.
   Energy remains entirely in File 15.
   ========================================================= */

.ars-glass-card.is-selected {

    --ars-motion-y:
        -8px;

    --ars-motion-scale:
        1.012;

    z-index:
        30;

}


/* =========================================================
   16.18 — SELECTED IMAGE DEPTH
   ========================================================= */

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

    --ars-motion-image-scale:
        1.065;

    transform:
        scale(1.065);

}


/* =========================================================
   16.19 — SELECTED LOGO DEPTH
   ========================================================= */

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

    --ars-motion-logo-y:
        -6px;

    transform:
        translate3d(
            0,
            -6px,
            0
        );

}


/* =========================================================
   16.20 — SELECTED CONTENT DEPTH
   ========================================================= */

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

    --ars-motion-content-y:
        -2px;

}


/* =========================================================
   16.21 — SELECTED BREATHING MOTION
   ---------------------------------------------------------
   Uses a child wrapper instead of continuously replacing
   the card transform, preventing transform conflicts.
   ========================================================= */

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

    animation:
        arsSelectedContentBreath
        4.8s
        ease-in-out
        infinite;

}


@keyframes arsSelectedContentBreath {

    0%,
    100% {

        opacity:
            1;

    }

    50% {

        opacity:
            .97;

    }

}


/* =========================================================
   16.22 — ACTIVE CARD DEPTH
   ========================================================= */

.ars-glass-card.is-active {

    z-index:
        15;

}


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

    --ars-motion-image-scale:
        1.04;

    transform:
        scale(1.04);

}


/* =========================================================
   16.23 — SELECTED + ACTIVE PRIORITY
   ========================================================= */

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

    --ars-motion-y:
        -9px;

    --ars-motion-scale:
        1.014;

    z-index:
        35;

}


/* =========================================================
   16.24 — CORE CARD AUTHORITY
   ---------------------------------------------------------
   Only motion.
   Visual styling remains in File 12.
   ========================================================= */

.ars-core-card {

    --ars-motion-duration:
        .8s;

}


@media (hover: hover) {

    .ars-core-card:hover {

        --ars-motion-y:
            -13px;

        --ars-motion-scale:
            1.016;

    }

}


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

    --ars-motion-image-scale:
        1.075;

    transform:
        scale(1.075);

}


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

    --ars-motion-logo-y:
        -7px;

    transform:
        translate3d(
            0,
            -7px,
            0
        );

}


/* =========================================================
   16.25 — INNER FAMILY MOTION
   ---------------------------------------------------------
   Inner ecosystem:
   Elegant / precise / controlled.
   ========================================================= */

.ars-specialized-card[data-family="inner"] {

    --ars-motion-duration:
        .72s;

}


@media (hover: hover) {

    .ars-specialized-card[data-family="inner"]:hover {

        --ars-motion-y:
            -9px;

        --ars-motion-scale:
            1.008;

    }

}


/* =========================================================
   16.26 — OUTER FAMILY MOTION
   ---------------------------------------------------------
   Outer ecosystem:
   Slightly more expansive / cinematic.
   ========================================================= */

.ars-specialized-card[data-family="outer"] {

    --ars-motion-duration:
        .82s;

}


@media (hover: hover) {

    .ars-specialized-card[data-family="outer"]:hover {

        --ars-motion-y:
            -12px;

        --ars-motion-scale:
            1.012;

    }

    .ars-specialized-card[data-family="outer"]:hover
    .ars-card-image img {

        --ars-motion-image-scale:
            1.07;

        transform:
            scale(1.07);

    }

}


/* =========================================================
   16.27 — FAMILY FALLBACK
   ---------------------------------------------------------
   If family data attributes are not present yet,
   no destructive nth-child geometry is introduced.

   Identity remains owned by File 13.
   ========================================================= */

.ars-specialized-card {

    transform-style:
        preserve-3d;

}


/* =========================================================
   16.28 — STAGGER
   ---------------------------------------------------------
   Entrance timing only.
   No layout dependency.
   ========================================================= */

.ars-glass-card:nth-child(1) {
    transition-delay: .04s;
}

.ars-glass-card:nth-child(2) {
    transition-delay: .09s;
}

.ars-glass-card:nth-child(3) {
    transition-delay: .14s;
}

.ars-glass-card:nth-child(4) {
    transition-delay: .19s;
}

.ars-glass-card:nth-child(5) {
    transition-delay: .24s;
}

.ars-glass-card:nth-child(6) {
    transition-delay: .29s;
}

.ars-glass-card:nth-child(7) {
    transition-delay: .34s;
}

.ars-glass-card:nth-child(8) {
    transition-delay: .39s;
}

.ars-glass-card:nth-child(9) {
    transition-delay: .44s;
}

.ars-glass-card:nth-child(10) {
    transition-delay: .49s;
}

.ars-glass-card:nth-child(11) {
    transition-delay: .54s;
}

.ars-glass-card:nth-child(12) {
    transition-delay: .59s;
}

.ars-glass-card:nth-child(13) {
    transition-delay: .64s;
}

.ars-glass-card:nth-child(14) {
    transition-delay: .69s;
}


/* =========================================================
   16.29 — HOVER FOCUS
   ---------------------------------------------------------
   No energy values here.
   ========================================================= */

@media (hover: hover) {

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

        transform:
            translateX(2px);

    }

}


/* =========================================================
   16.30 — NEIGHBOR FOCUS
   ---------------------------------------------------------
   Only opacity/filter response.
   No geometry changes.
   ========================================================= */

@media (hover: hover) {

    .ars-core-grid:has(.ars-glass-card:hover)
    .ars-glass-card:not(:hover) {

        filter:
            brightness(.94);

        transition:
            filter
            .55s
            ease;

    }

}


/* =========================================================
   16.31 — TOUCH MODE
   ========================================================= */

@media (hover: none) {

    .ars-glass-card {

        transform:
            none;

    }

    .ars-glass-card:active {

        transform:
            translate3d(
                0,
                -4px,
                0
            )
            scale(1.004);

    }

    .ars-glass-card.is-selected {

        transform:
            translate3d(
                0,
                -4px,
                0
            )
            scale(1.004);

    }

}


/* =========================================================
   16.32 — TABLET MOTION
   ========================================================= */

@media (max-width: 1024px) {

    .ars-glass-card {

        --ars-motion-duration:
            .65s;

    }

    .ars-glass-card.is-selected {

        --ars-motion-y:
            -6px;

        --ars-motion-scale:
            1.008;

    }

}


/* =========================================================
   16.33 — MOBILE MOTION SAFETY
   ========================================================= */

@media (max-width: 768px) {

    .ars-glass-card {

        filter:
            none;

    }

    .ars-glass-card:hover {

        transform:
            none;

    }

    .ars-glass-card.is-selected {

        transform:
            translate3d(
                0,
                -4px,
                0
            )
            scale(1.004);

    }

    .ars-card-image img {

        transition:
            transform
            .85s
            var(--ars-motion-ease);

    }

}


/* =========================================================
   16.34 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ars-glass-card.is-selected {

        transform:
            translate3d(
                0,
                -3px,
                0
            )
            scale(1.002);

    }

}


/* =========================================================
   16.35 — ENERGY FADING SAFETY
   ---------------------------------------------------------
   File 15 controls energy decay.
   File 16 only removes cinematic emphasis.
   ========================================================= */

.ars-glass-card.energy-fading {

    --ars-motion-scale:
        1;

}


.ars-glass-card.energy-fading
.ars-card-content {

    animation:
        none;

}


/* =========================================================
   16.36 — REDUCED MOTION
   ========================================================= */

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

    .ars-glass-card,
    .ars-glass-card *,
    .ars-card-image img,
    .ars-card-logo,
    .ars-card-content,
    .ars-card-category,
    .ars-card-action {

        animation:
            none !important;

        transition:
            none !important;

    }

    .ars-glass-card {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

    }

}


/* =========================================================
   16.37 — GPU / RENDER SAFETY
   ========================================================= */

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

    backface-visibility:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================================
   16.38 — FINAL MOTION OWNERSHIP LOCK
   ---------------------------------------------------------
   File 16 owns:
   ✓ transform
   ✓ motion timing
   ✓ entrance
   ✓ hover movement
   ✓ image zoom
   ✓ logo float
   ✓ content micro-motion
   ✓ selected depth
   ✓ active depth
   ✓ family motion
   ✓ responsive motion
   ✓ reduced motion

   File 16 DOES NOT own:
   ✗ grid
   ✗ card dimensions
   ✗ material
   ✗ glass
   ✗ energy
   ✗ golden reveal
   ✗ energy bridge
   ✗ border radiation
   ========================================================= */


/* =========================================================
   END OF
   16 — MOTION / CINEMATIC ANIMATION ENGINE
   ========================================================= */














/* =========================================================
   ARS HERITAGE GROUP — HERO CONTENT STABILIZATION PATCH
   =========================================================
   PURPOSE:
   • Keep Hero text outside the orbital interaction zone
   • Prevent text from entering / crossing the orbit system
   • Prevent accidental visual disappearance
   • Preserve existing orbital universe
   • No HTML restructuring
   ========================================================= */


/* =========================================================
   HC.01 — HERO CONTENT MASTER
   ========================================================= */

.hero-content {

    position: absolute;

    top: clamp(105px, 11vh, 145px);

    left: 50%;

    width: min(
        900px,
        calc(100% - 48px)
    );

    transform:
        translateX(-50%);

    z-index: 200;

    isolation: isolate;

    text-align: center;

    pointer-events: auto;

    opacity: 1;

    visibility: visible;

    display: block;

}


/* =========================================================
   HC.02 — CONTENT DEPTH ISOLATION
   ========================================================= */

.hero-content::before {

    content: "";

    position: absolute;

    top: -40px;

    left: 50%;

    width: 125%;

    height: 125%;

    transform:
        translateX(-50%);

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at center,
            rgba(2,7,13,.82) 0%,
            rgba(2,7,13,.55) 34%,
            rgba(2,7,13,.18) 58%,
            transparent 76%
        );

    filter:
        blur(18px);

    opacity: .92;

}


/* =========================================================
   HC.03 — HERO EYEBROW
   ========================================================= */

.hero-content .hero-eyebrow {

    position: relative;

    z-index: 2;

    margin:
        0 0 18px;

    color:
        var(--home-text-gold);

    font-size:
        clamp(12px, 1.1vw, 17px);

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    opacity:
        1;

}


/* =========================================================
   HC.04 — HERO MAIN TITLE
   ========================================================= */

.hero-content h1 {

    position: relative;

    z-index: 3;

    max-width:
        900px;

    margin:
        0 auto;

    color:
        var(--home-white);

    font-size:
        clamp(
            42px,
            5.8vw,
            86px
        );

    font-weight:
        700;

    line-height:
        .98;

    letter-spacing:
        -.045em;

    text-align:
        center;

    text-wrap:
        balance;

    opacity:
        1;

    visibility:
        visible;

    text-shadow:

        0 3px 24px
        rgba(0,0,0,.72),

        0 0 55px
        rgba(0,168,255,.045);

}


/* =========================================================
   HC.05 — HERO TITLE SPANS
   ========================================================= */

.hero-content h1 span {

    position: relative;

    z-index: 4;

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   HC.06 — HERO DESCRIPTION
   ========================================================= */

.hero-content p {

    position: relative;

    z-index: 3;

    max-width:
        760px;

    margin:
        30px auto 0;

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

    font-size:
        clamp(
            15px,
            1.35vw,
            19px
        );

    font-weight:
        400;

    line-height:
        1.85;

    text-align:
        center;

    opacity:
        1;

    visibility:
        visible;

    text-shadow:
        0 2px 15px
        rgba(0,0,0,.55);

}


/* =========================================================
   HC.07 — HERO ACTION AREA
   ========================================================= */

.hero-content .hero-actions {

    position: relative;

    z-index: 5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        16px;

    margin-top:
        36px;

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   HC.08 — HERO BUTTON SAFETY
   ========================================================= */

.hero-content .hero-actions a,
.hero-content .hero-actions button {

    position: relative;

    z-index: 10;

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   HC.09 — STOP ACCIDENTAL REVEAL STATES
   ========================================================= */

/*
   IMPORTANT:
   This prevents generic reveal classes from making the
   Hero content permanently invisible.
*/

.hero-content.is-hidden,
.hero-content.hidden,
.hero-content.fade-out {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   HC.10 — HERO CONTENT ABOVE ORBIT
   ========================================================= */

.hero .hero-content {

    z-index:
        200;

}


/* =========================================================
   HC.11 — ORBIT BELOW CONTENT
   ========================================================= */

.hero .ars-orbit {

    z-index:
        8;

}


/* =========================================================
   HC.12 — CONTENT DOES NOT PARTICIPATE IN ORBIT
   ========================================================= */

.hero-content,
.hero-content * {

    transform-style:
        flat;

}


/* =========================================================
   HC.13 — DESKTOP POSITION
   ========================================================= */

@media (min-width: 769px) {

    .hero-content {

        top:
            clamp(
                100px,
                10vh,
                145px
            );

    }

}


/* =========================================================
   HC.14 — TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .hero-content {

        width:
            min(
                820px,
                calc(100% - 40px)
            );

        top:
            105px;

    }

    .hero-content h1 {

        font-size:
            clamp(
                40px,
                7vw,
                68px
            );

    }

}


/* =========================================================
   HC.15 — MOBILE HERO CONTENT
   ========================================================= */

@media (max-width: 768px) {

    .hero-content {

        position:
            absolute;

        top:
            90px;

        left:
            50%;

        width:
            calc(100% - 30px);

        transform:
            translateX(-50%);

    }

    .hero-content h1 {

        font-size:
            clamp(
                38px,
                10vw,
                56px
            );

        line-height:
            1.02;

        letter-spacing:
            -.04em;

    }

    .hero-content p {

        margin-top:
            22px;

        font-size:
            15px;

        line-height:
            1.75;

    }

    .hero-content .hero-actions {

        margin-top:
            28px;

        gap:
            12px;

    }

}


/* =========================================================
   HC.16 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-content {

        top:
            78px;

        width:
            calc(100% - 24px);

    }

    .hero-content .hero-eyebrow {

        font-size:
            10px;

        letter-spacing:
            .13em;

    }

    .hero-content h1 {

        font-size:
            clamp(
                34px,
                11vw,
                48px
            );

    }

    .hero-content p {

        font-size:
            14px;

        line-height:
            1.7;

    }

}


/* =========================================================
   HC.17 — FINAL HERO CONTENT LOCK
   ========================================================= */

/*
   HERO CONTENT IS NOW:

   ✓ Outside the orbital center
   ✓ Above the orbital layer
   ✓ Permanently visible
   ✓ Independent from orbit transforms
   ✓ Protected against generic hidden states
   ✓ Responsive
   ✓ No HTML changes
   ✓ No orbit-system rewrite
*/