/* =========================================================
ARS HERITAGE GROUP
PREMIUM INDUSTRIAL ECOSYSTEM
MASTER CSS — FINAL UNIFIED V2
========================================================= */

:root{

--ars-black:#050608;
--ars-black-deep:#020304;
--ars-deep:#090b0f;
--ars-panel:#101318;

--ars-white:#f7f4ee;
--ars-soft-white:#d9d6cf;
--ars-silver:#c7ccd3;
--ars-silver-soft:#8e959e;

--ars-gold:#d6a84f;
--ars-gold-light:#f5d98b;
--ars-gold-deep:#8f6425;

--ars-bronze:#9a6b3f;
--ars-bronze-light:#c89a63;

--ars-red:#a82c22;
--ars-yellow:#e0aa28;
--ars-blue:#1579c8;
--ars-brown:#593b28;

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

--ars-glass:
linear-gradient(
135deg,
rgba(255,255,255,.075),
rgba(255,255,255,.018)
);

--ars-shadow-black:rgba(0,0,0,.75);

--ars-shadow-gold:rgba(214,168,79,.28);

--ars-gold-glow:
0 0 30px rgba(214,168,79,.35),
0 0 80px rgba(214,168,79,.12);

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

}

/* =========================================================
GLOBAL RESET
========================================================= */

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

html{
scroll-behavior:smooth;
background:var(--ars-black-deep);
}

body{

margin:0;

background:

radial-gradient(
circle at 50% 0%,
rgba(214,168,79,.06),
transparent 35%
),

linear-gradient(
180deg,
#050608 0%,
#080a0d 45%,
#050608 100%
);

color:var(--ars-white);

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

overflow-x:hidden;

}

a{
color:inherit;
text-decoration:none;
}

img{
max-width:100%;
height:auto;
display:block;
}

::selection{
background:var(--ars-gold);
color:var(--ars-black);
}

/* =========================================================
PAGE
========================================================= */

.ars-group-page{

position:relative;
min-height:100vh;
isolation:isolate;
overflow:hidden;

}

.ars-group-page::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

z-index:-10;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.018),
transparent
);

opacity:.8;

}

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

.ars-glass{

position:relative;

background:var(--ars-glass);

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

backdrop-filter:
blur(20px)
saturate(130%);

-webkit-backdrop-filter:
blur(20px)
saturate(130%);

box-shadow:

0 25px 70px
var(--ars-shadow-black),

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

overflow:hidden;

}

.ars-glass::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
rgba(255,255,255,.10),
transparent 28%,
transparent 70%,
rgba(214,168,79,.045)
);

pointer-events:none;

}

/* =========================================================
SECTION SYSTEM
========================================================= */

.ars-group-page section{

position:relative;

width:100%;

padding:
130px
6vw;

}

.section-header{

max-width:900px;

margin:
0
auto
70px;

text-align:center;

}

.section-label{

display:inline-block;

margin-bottom:20px;

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

font-size:11px;

font-weight:700;

letter-spacing:4px;

text-transform:uppercase;

}

.section-header h2{

color:var(--ars-white);

font-size:
clamp(36px,5vw,72px);

line-height:1.05;

letter-spacing:-2px;

text-shadow:
0 0 30px
rgba(255,255,255,.06);

}

.section-header p{

max-width:760px;

margin:
28px
auto
0;

color:
rgba(247,244,238,.58);

line-height:1.9;

}

/* =========================================================
BACKGROUND GLOW
========================================================= */

.group-background-glow{

position:absolute;

width:900px;
height:900px;

top:15%;
left:50%;

transform:translateX(-50%);

border-radius:50%;

background:

radial-gradient(
circle,
rgba(214,168,79,.055),
rgba(21,121,200,.025) 35%,
transparent 70%
);

filter:blur(70px);

pointer-events:none;

z-index:-5;

}

/* =========================================================
HERO
========================================================= */

.group-hero{

position:relative;

min-height:100vh;
min-height:100svh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:
120px
6vw
100px;

overflow:hidden;

isolation:isolate;

background:

radial-gradient(
circle at 50% 48%,
rgba(214,168,79,.16),
transparent 14%
),

radial-gradient(
circle at 18% 30%,
rgba(21,121,200,.08),
transparent 25%
),

radial-gradient(
circle at 82% 65%,
rgba(168,44,34,.07),
transparent 25%
),

linear-gradient(
180deg,
#030405,
#090b0e 55%,
#040506
);

}

/* =========================================================
INDUSTRIAL GRID
========================================================= */

.hero-industrial-grid{

position:absolute;

inset:-20%;

z-index:-4;

opacity:.22;

background-image:

linear-gradient(
rgba(214,168,79,.07)
1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(21,121,200,.06)
1px,
transparent 1px
);

background-size:
80px 80px,
80px 80px;

transform:
perspective(700px)
rotateX(62deg)
scale(1.8);

transform-origin:center bottom;

animation:
grid-drift
24s
linear
infinite;

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

}

@keyframes grid-drift{

from{
background-position:
0 0,
0 0;
}

to{
background-position:
0 80px,
80px 0;
}

}

/* =========================================================
HERO AMBIENT
========================================================= */

.group-hero::before{

content:"";

position:absolute;

width:70vw;
height:70vw;

max-width:1000px;
max-height:1000px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(214,168,79,.13),
rgba(154,107,63,.07) 25%,
rgba(21,121,200,.035) 45%,
transparent 70%
);

filter:blur(30px);

animation:
hero-breath
7s
ease-in-out
infinite;

z-index:-3;

}

@keyframes hero-breath{

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

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

}

/* =========================================================
MOVING SCAN
========================================================= */

.group-hero::after{

content:"";

position:absolute;

top:-20%;
left:-10%;

width:120%;
height:2px;

background:

linear-gradient(
90deg,
transparent,
var(--ars-blue),
var(--ars-white),
var(--ars-gold),
var(--ars-bronze),
transparent
);

box-shadow:
0 0 20px var(--ars-blue),
0 0 45px rgba(214,168,79,.4);

animation:
hero-scan
8s
linear
infinite;

opacity:.65;

z-index:-1;

}

@keyframes hero-scan{

0%{
top:-20%;
opacity:0;
}

15%{
opacity:.8;
}

80%{
opacity:.7;
}

100%{
top:120%;
opacity:0;
}

}

/* =========================================================
ENERGY CORE
========================================================= */

.hero-energy-core{

position:absolute;

width:240px;
height:240px;

border-radius:50%;

z-index:-1;

background:

radial-gradient(
circle,
rgba(255,255,255,.95) 0%,
var(--ars-gold-light) 5%,
var(--ars-gold) 12%,
rgba(214,168,79,.35) 25%,
rgba(21,121,200,.12) 45%,
transparent 70%
);

filter:
blur(1px)
drop-shadow(
0 0 35px
var(--ars-shadow-gold)
);

animation:
core-pulse
4s
ease-in-out
infinite;

}

.hero-energy-core::before{

content:"";

position:absolute;

inset:-35px;

border-radius:50%;

border:
1px solid
rgba(214,168,79,.32);

box-shadow:
0 0 45px
rgba(214,168,79,.18),

inset
0 0 30px
rgba(21,121,200,.12);

animation:
core-ring
8s
linear
infinite;

}

@keyframes core-pulse{

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

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

}

@keyframes core-ring{

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

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

}

/* =========================================================
ORBITAL RINGS
========================================================= */

.hero-energy-orbits{

position:absolute;

width:680px;
height:680px;

max-width:80vw;
max-height:80vw;

border-radius:50%;

z-index:-2;

}

.energy-orbit{

position:absolute;

inset:0;

border-radius:50%;

border:
1px solid
rgba(214,168,79,.18);

box-shadow:
0 0 30px
rgba(214,168,79,.05);

}

.orbit-a{

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

animation:
orbit-spin-a
18s
linear
infinite;

}

.orbit-b{

transform:
rotateY(65deg)
rotateZ(-25deg);

border-color:
rgba(21,121,200,.16);

animation:
orbit-spin-b
24s
linear
infinite
reverse;

}

.orbit-c{

inset:12%;

transform:
rotateX(70deg);

border-color:
rgba(168,44,34,.15);

animation:
orbit-spin-c
12s
linear
infinite;

}

@keyframes orbit-spin-a{

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

}

@keyframes orbit-spin-b{

to{
transform:
rotateY(65deg)
rotateZ(-385deg);
}

}

@keyframes orbit-spin-c{

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

}

/* =========================================================
ENERGY LINES
========================================================= */

.hero-energy-lines{

position:absolute;

inset:0;

z-index:-1;

pointer-events:none;

}

.energy-line{

position:absolute;

height:1px;

transform-origin:left center;

background:

linear-gradient(
90deg,
transparent,
rgba(214,168,79,.15),
var(--ars-gold),
rgba(21,121,200,.55),
transparent
);

box-shadow:
0 0 12px
rgba(214,168,79,.35);

opacity:.45;

animation:
energy-flow
5s
ease-in-out
infinite;

}

.line-1{
width:38%;
top:32%;
left:5%;
transform:rotate(12deg);
}

.line-2{
width:30%;
top:42%;
right:4%;
transform:rotate(-14deg);
}

.line-3{
width:35%;
top:65%;
left:2%;
transform:rotate(-10deg);
}

.line-4{
width:32%;
top:72%;
right:5%;
transform:rotate(11deg);
}

.line-5{
width:25%;
top:20%;
left:38%;
transform:rotate(90deg);
}

.line-6{
width:25%;
bottom:12%;
left:40%;
transform:rotate(90deg);
}

@keyframes energy-flow{

0%,100%{
opacity:.18;
filter:brightness(.8);
}

50%{
opacity:.9;
filter:brightness(1.8);
}

}

/* =========================================================
LOGO
========================================================= */

.group-logo-wrapper{

position:relative;

z-index:5;

width:
clamp(
180px,
22vw,
330px
);

height:
clamp(
180px,
22vw,
330px
);

display:flex;

align-items:center;

justify-content:center;

margin-bottom:28px;

animation:
logo-arrival
1.8s
var(--ars-ease)
both;

}

.group-logo-wrapper::before{

content:"";

position:absolute;

inset:-35px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(214,168,79,.28),
transparent 68%
);

filter:blur(18px);

animation:
logo-glow
4s
ease-in-out
infinite;

}

.group-logo-wrapper::after{

content:"";

position:absolute;

inset:-15%;

border:
1px solid
rgba(214,168,79,.28);

border-radius:50%;

animation:
logo-orbit
14s
linear
infinite;

}

.group-logo{

position:relative;

width:100%;
height:100%;

object-fit:contain;

z-index:3;

filter:
drop-shadow(
0 0 18px
rgba(214,168,79,.55)
)
drop-shadow(
0 0 55px
rgba(21,121,200,.18)
);

animation:
logo-breathe
4s
ease-in-out
infinite;

}

@keyframes logo-arrival{

from{
opacity:0;
transform:scale(.35) rotate(-12deg);
filter:blur(20px);
}

to{
opacity:1;
transform:scale(1) rotate(0);
filter:blur(0);
}

}

@keyframes logo-glow{

0%,100%{
transform:scale(.85);
opacity:.45;
}

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

}

@keyframes logo-breathe{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.035);
}

}

@keyframes logo-orbit{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* =========================================================
TYPOGRAPHY
========================================================= */

.group-overline{

position:relative;

z-index:3;

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

font-size:
clamp(.65rem,1vw,.85rem);

font-weight:700;

letter-spacing:.28em;

margin-bottom:18px;

animation:
text-rise
1s
.25s
var(--ars-ease)
both;

}

.group-hero h1{

position:relative;

z-index:3;

margin:0;

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

line-height:.9;

letter-spacing:-.045em;

font-weight:800;

background:

linear-gradient(
110deg,
#ffffff 0%,
var(--ars-gold-light) 35%,
var(--ars-gold) 55%,
var(--ars-bronze-light) 75%,
#ffffff 100%
);

background-size:250% auto;

-webkit-background-clip:text;
background-clip:text;

color:transparent;

animation:

title-arrival
1.4s
.45s
var(--ars-ease)
both,

gold-shift
8s
linear
infinite;

}

.group-hero h2{

position:relative;

z-index:3;

margin:
28px
0;

font-size:
clamp(1.2rem,2.3vw,2.1rem);

line-height:1.35;

font-weight:400;

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

animation:
text-rise
1.2s
.65s
var(--ars-ease)
both;

}

.group-hero > p{

position:relative;

z-index:3;

max-width:760px;

color:
rgba(247,244,238,.68);

font-size:
clamp(.95rem,1.3vw,1.1rem);

line-height:1.9;

animation:
text-rise
1.2s
.8s
var(--ars-ease)
both;

}

@keyframes title-arrival{

from{
opacity:0;
transform:translateY(50px) scale(.92);
filter:blur(18px);
}

to{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}

}

@keyframes text-rise{

from{
opacity:0;
transform:translateY(25px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes gold-shift{

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

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

}

/* =========================================================
BUTTONS
========================================================= */

.group-buttons{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:16px;

margin-top:36px;

position:relative;

z-index:10;

}

.btn-primary,
.btn-secondary{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

min-width:190px;

padding:
15px
28px;

border-radius:999px;

font-size:.9rem;

font-weight:700;

letter-spacing:.08em;

transition:
.5s
var(--ars-ease);

overflow:hidden;

}

.btn-primary{

color:
var(--ars-black);

background:

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

box-shadow:
0 12px 40px
rgba(214,168,79,.22);

}

.btn-secondary{

color:
var(--ars-white);

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

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

backdrop-filter:
blur(12px);

}

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

transform:
translateY(-5px)
scale(1.03);

}

.btn-primary:hover{

box-shadow:
0 18px 55px
rgba(214,168,79,.4);

}

.btn-secondary:hover{

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

box-shadow:
0 0 35px
rgba(21,121,200,.18);

}

/* =========================================================
HERO NODES
========================================================= */

.hero-ecosystem-nodes{

position:absolute;

inset:0;

z-index:8;

pointer-events:none;

}

.hero-ecosystem-node{

position:absolute;

pointer-events:auto;

width:
clamp(150px,12vw,210px);

padding:
18px
20px;

border-radius:18px;

background:

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

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

backdrop-filter:
blur(20px)
saturate(140%);

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

box-shadow:

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

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

transition:

transform
.6s
var(--ars-ease),

border-color
.5s,

box-shadow
.5s,

opacity
.5s;

animation:
node-float
6s
ease-in-out
infinite;

}

.hero-ecosystem-node::before{

content:"";

position:absolute;

inset:-1px;

border-radius:inherit;

padding:1px;

background:

linear-gradient(
135deg,
rgba(214,168,79,.65),
transparent 35%,
rgba(21,121,200,.35),
transparent 70%,
rgba(154,107,63,.5)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:.45;

pointer-events:none;

}

.hero-ecosystem-node:hover{

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

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

box-shadow:

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

0 0 45px
rgba(214,168,79,.22),

0 0 70px
rgba(21,121,200,.12);

}

.node-icon{

display:block;

color:
var(--ars-gold);

font-size:.65rem;

letter-spacing:.18em;

margin-bottom:8px;

}

.node-name{

display:block;

color:
var(--ars-white);

font-size:1rem;

font-weight:700;

}

.node-line{

display:block;

margin-top:6px;

color:
rgba(247,244,238,.48);

font-size:.68rem;

letter-spacing:.05em;

}

.node-brain{
top:15%;
left:5%;
animation-delay:-1s;
}

.node-design{
top:34%;
left:2%;
animation-delay:-3s;
}

.node-rose{
bottom:15%;
left:7%;
animation-delay:-5s;
}

.node-naji{
top:15%;
right:5%;
animation-delay:-2s;
}

.node-company{
top:34%;
right:2%;
animation-delay:-4s;
}

.node-engineering{
bottom:15%;
right:7%;
animation-delay:-6s;
}

@keyframes node-float{

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

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

}

/* =========================================================
CONNECTION LINES
========================================================= */

.hero-connection-lines{

position:absolute;

inset:0;

z-index:4;

pointer-events:none;

}

.hero-connection-line{

position:absolute;

height:1px;

transform-origin:left center;

background:

linear-gradient(
90deg,
transparent,
rgba(214,168,79,.25),
var(--ars-gold),
rgba(21,121,200,.45),
transparent
);

box-shadow:
0 0 15px
rgba(214,168,79,.25);

opacity:.35;

animation:
connection-pulse
4s
ease-in-out
infinite;

}

@keyframes connection-pulse{

0%,100%{
opacity:.15;
filter:brightness(.7);
}

50%{
opacity:.75;
filter:brightness(1.6);
}

}

/* =========================================================
UNIVERSAL PAGE CLASSES
========================================================= */

.who-we-are,
.mission,
.core-values,
.vision,
.engineering-dna,
.ecosystem,
.global-strategy,
.organization,
.leadership,
.technology-ecosystem,
.engineering-standards,
.timeline,
.gallery,
.future,
.ars-stats,
.partnership,
.contact-cta{

position:relative;

padding:
120px
6vw;

max-width:1500px;

margin:
0
auto;

}

/* =========================================================
GRIDS
========================================================= */

.who-grid,
.mission-grid,
.values-grid,
.vision-grid,
.dna-grid,
.future-grid,
.partnership-grid,
.standards-grid,
.timeline-grid,
.stats-grid,
.leadership-grid,
.partners-grid{

display:grid;

gap:24px;

}

.who-grid{
grid-template-columns:1fr 1fr;
}

.mission-grid,
.values-grid,
.dna-grid,
.future-grid,
.standards-grid{
grid-template-columns:repeat(3,1fr);
}

.partnership-grid{
grid-template-columns:repeat(4,1fr);
}

.vision-grid{
grid-template-columns:repeat(4,1fr);
}

.timeline-grid,
.stats-grid{
grid-template-columns:repeat(4,1fr);
}

.leadership-grid{
grid-template-columns:repeat(2,1fr);
}

.partners-grid{
grid-template-columns:repeat(6,1fr);
}

/* =========================================================
CARDS
========================================================= */

.mission-card,
.value-card,
.vision-card,
.dna-card,
.future-card,
.partner-card,
.standard-card,
.timeline-card,
.stat-card,
.leader-card,
.country-card,
.org-card{

position:relative;

padding:36px;

border-radius:24px;

transition:

transform
.5s
var(--ars-ease),

border-color
.5s,

box-shadow
.5s,

opacity
.6s;

}

.mission-card h3,
.value-card h3,
.vision-card h3,
.dna-card h3,
.future-card h3,
.partner-card h3,
.standard-card h3,
.timeline-card h3{

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

margin-bottom:
15px;

font-size:
1.25rem;

}

.mission-card p,
.value-card p,
.vision-card p,
.dna-card p,
.future-card p,
.partner-card p,
.standard-card p,
.timeline-card p{

color:
rgba(247,244,238,.62);

line-height:1.85;

}

.mission-card:hover,
.value-card:hover,
.vision-card:hover,
.dna-card:hover,
.future-card:hover,
.partner-card:hover,
.standard-card:hover,
.timeline-card:hover,
.stat-card:hover,
.leader-card:hover,
.country-card:hover,
.org-card:hover{

transform:
translateY(-8px);

border-color:
rgba(214,168,79,.4);

box-shadow:

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

0 0 35px
rgba(214,168,79,.1);

}

/* =========================================================
WHO WE ARE
========================================================= */

.who-left,
.who-right{

min-height:500px;

border-radius:24px;

}

.who-left{
padding:55px;
}

.who-left h3{

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

font-size:32px;

margin-bottom:30px;

}

.who-left p{

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

line-height:1.9;

margin-bottom:22px;

}

.who-right{
padding:0;
overflow:hidden;
}

.who-right img{

width:100%;
height:100%;
min-height:420px;
object-fit:cover;

filter:
saturate(.8)
contrast(1.08);

transition:
transform
1s
var(--ars-ease);

}

.who-right:hover img{
transform:scale(1.06);
}

/* =========================================================
VISION
========================================================= */

.vision-center{

max-width:900px;

margin:
0
auto
50px;

padding:60px;

border-radius:24px;

text-align:center;

}

.vision-center blockquote{

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

line-height:1.45;

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

}

/* =========================================================
ECOSYSTEM — 9 NODES
========================================================= */

.ecosystem-wrapper{

position:relative;

min-height:760px;

}

.ecosystem-center{

position:absolute;

top:50%;
left:50%;

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

width:220px;
height:220px;

display:flex;

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

text-align:center;

border-radius:50%;

border:
1px solid
rgba(214,168,79,.4);

box-shadow:
0 0 70px
rgba(214,168,79,.18);

z-index:5;

}

.ecosystem-center h3{

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

font-size:22px;

}

.eco{

position:absolute;

min-width:170px;

padding:25px;

text-align:center;

border-radius:14px;

z-index:3;

transition:

transform
.5s
var(--ars-ease),

border-color
.5s,

box-shadow
.5s,

opacity
.5s;

}

.eco:hover{

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

border-color:
rgba(214,168,79,.45);

box-shadow:

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

0 0 30px
rgba(214,168,79,.12);

}

.eco h3{

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

margin-bottom:10px;

}

.eco p{

color:
rgba(247,244,238,.55);

font-size:.85rem;

}

/* 9 NODE POSITIONS */

.eco-1{
top:5%;
left:18%;
}

.eco-2{
top:5%;
right:18%;
}

.eco-3{
top:35%;
left:3%;
}

.eco-4{
top:35%;
right:3%;
}

.eco-5{
bottom:8%;
left:10%;
}

.eco-6{
bottom:8%;
right:10%;
}

.eco-7{
top:60%;
left:30%;
}

.eco-8{
top:60%;
right:30%;
}

.eco-9{

top:78%;
left:50%;

transform:
translateX(-50%);

}

.eco-9:hover{

transform:
translateX(-50%)
translateY(-8px)
scale(1.04);

}

/* =========================================================
ECOSYSTEM ORBIT
========================================================= */

.ecosystem-wrapper::before{

content:"";

position:absolute;

width:520px;
height:520px;

top:50%;
left:50%;

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

border-radius:50%;

background:

radial-gradient(
circle,
rgba(214,168,79,.10),
rgba(21,121,200,.025) 40%,
transparent 68%
);

filter:blur(30px);

pointer-events:none;

}

.ecosystem-wrapper::after{

content:"";

position:absolute;

width:420px;
height:420px;

top:50%;
left:50%;

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

border:
1px solid
rgba(214,168,79,.1);

border-radius:50%;

box-shadow:

0 0 80px
rgba(214,168,79,.05),

inset
0 0 50px
rgba(21,121,200,.04);

animation:
ecosystem-ring
18s
linear
infinite;

pointer-events:none;

}

@keyframes ecosystem-ring{

from{

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

}

50%{
opacity:.65;
}

to{

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

}

}

/* =========================================================
GLOBAL STRATEGY
========================================================= */

.country-grid{

max-width:1100px;

margin:auto;

display:grid;

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

gap:18px;

}

.country-card{

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

padding:
28px
15px;

border-radius:16px;

}

.country-card span{

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

font-size:.9rem;

font-weight:600;

}

/* =========================================================
   ARS HERITAGE GROUP
   ORGANIZATION CHART
   PREMIUM INDUSTRIAL ENERGY NETWORK
   FINAL RESPONSIVE + MOBILE PERFORMANCE VERSION
   ========================================================= */


/* =========================================================
   ORGANIZATION ROOT
   ========================================================= */

.organization{

    position:relative;

    width:100%;

    isolation:isolate;

    overflow:hidden;

}


/* =========================================================
   ORGANIZATION CHART
   ========================================================= */

.organization .org-chart{

    position:relative;

    width:min(1400px,100%);

    min-height:1000px;

    margin:0 auto;

    padding:
        80px
        30px
        100px;

    display:flex;

    flex-direction:column;

    align-items:center;

    box-sizing:border-box;

}


/* =========================================================
   ENERGY SVG NETWORK
   ========================================================= */

.organization .org-energy-network{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:1;

    pointer-events:none;

    overflow:visible;

}


/* =========================================================
   BASE ENERGY PATH
   ========================================================= */

.organization .org-energy-path{

    fill:none;

    stroke:
        rgba(238,194,91,.72);

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 5px
            rgba(238,194,91,.55)
        );

}


/* =========================================================
   MAIN SPINE
   ========================================================= */

.organization .org-main-spine{

    stroke:
        rgba(248,211,123,.95);

    stroke-width:4;

    stroke-dasharray:
        12 16;

    animation:
        orgMainEnergyFlow
        3s
        linear
        infinite;

}


/* =========================================================
   DISTRIBUTION BAR
   ========================================================= */

.organization .org-distribution-bar{

    stroke:
        rgba(232,184,77,.8);

    stroke-width:3;

    stroke-dasharray:
        10 14;

    animation:
        orgDistributionFlow
        4s
        linear
        infinite;

}


/* =========================================================
   MAIN BRANCHES
   ========================================================= */

.organization .org-branch-main{

    stroke:
        rgba(239,194,91,.82);

    stroke-width:3;

    stroke-dasharray:
        8 14;

    animation:
        orgBranchFlow
        3.5s
        linear
        infinite;

}


/* =========================================================
   LOWER BRANCHES
   ========================================================= */

.organization .org-branch-node{

    stroke:
        rgba(225,174,68,.7);

    stroke-width:2.5;

    stroke-dasharray:
        7 13;

    animation:
        orgLowerBranchFlow
        4s
        linear
        infinite;

}


/* =========================================================
   MOVING ENERGY
   ========================================================= */

.organization .org-energy-flow{

    fill:none;

    stroke:
        url(#orgEnergyFlow);

    stroke-width:8;

    stroke-linecap:round;

    stroke-linejoin:round;

    opacity:1;

    filter:
        url(#orgEnergyGlow);

    stroke-dasharray:
        55 500;

    animation:
        orgEnergyPulse
        2.8s
        linear
        infinite;

}


/* =========================================================
   ENERGY ANIMATIONS
   ========================================================= */

@keyframes orgEnergyPulse{

    from{

        stroke-dashoffset:
            555;

    }

    to{

        stroke-dashoffset:
            0;

    }

}


@keyframes orgMainEnergyFlow{

    from{

        stroke-dashoffset:
            28;

    }

    to{

        stroke-dashoffset:
            0;

    }

}


@keyframes orgDistributionFlow{

    from{

        stroke-dashoffset:
            24;

    }

    to{

        stroke-dashoffset:
            0;

    }

}


@keyframes orgBranchFlow{

    from{

        stroke-dashoffset:
            22;

    }

    to{

        stroke-dashoffset:
            0;

    }

}


@keyframes orgLowerBranchFlow{

    from{

        stroke-dashoffset:
            20;

    }

    to{

        stroke-dashoffset:
            0;

    }

}


/* =========================================================
   CHART LEVELS
   ========================================================= */

.organization .org-chart-level{

    position:relative;

    z-index:5;

    width:100%;

}


/* =========================================================
   CORE LEVEL
   ========================================================= */

.organization .org-level-core{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:220px;

    margin-bottom:55px;

}


/* =========================================================
   FOUR PILLARS
   ========================================================= */

.organization .org-level-pillars{

    display:grid;

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

    width:min(1180px,100%);

    gap:28px;

    align-items:stretch;

    margin:
        0
        auto
        100px;

}


/* =========================================================
   FOUR ECOSYSTEM CARDS
   ========================================================= */

.organization .org-level-ecosystem{

    display:grid;

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

    width:min(1180px,100%);

    gap:28px;

    align-items:stretch;

    margin:0 auto;

}


/* =========================================================
   ORGANIZATION NODES
   ========================================================= */

.organization .org-node{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-sizing:border-box;

    min-width:0;

    padding:
        30px
        22px;

    opacity:0;

    transform:
        translateY(35px)
        scale(.96);

    animation:
        orgNodeEntrance
        1s
        cubic-bezier(.2,.75,.2,1)
        forwards;

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

        border-color
        .45s
        ease,

        box-shadow
        .45s
        ease;

}


/* =========================================================
   ENTRANCE
   ========================================================= */

@keyframes orgNodeEntrance{

    0%{

        opacity:0;

        transform:
            translateY(35px)
            scale(.95);

        filter:
            blur(7px);

    }

    70%{

        opacity:1;

        filter:
            blur(0);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   CORE CARD
   ========================================================= */

.organization .org-core-node{

    width:
        min(500px,90%);

    min-height:210px;

    border-color:
        rgba(239,195,94,.62);

    box-shadow:

        0 0 35px
        rgba(220,169,65,.2),

        0 0 90px
        rgba(213,161,57,.08),

        inset 0 0 45px
        rgba(220,169,65,.06);

}


/* =========================================================
   PILLAR CARDS
   ========================================================= */

.organization .org-pillar-node{

    width:100%;

    min-height:210px;

    height:210px;

}


/* =========================================================
   ECOSYSTEM CARDS
   ========================================================= */

.organization .org-ecosystem-node{

    width:100%;

    min-height:180px;

    height:180px;

}


/* =========================================================
   ENERGY ORBIT
   ========================================================= */

.organization .org-node-orbit{

    position:absolute;

    inset:-22px;

    border:
        1px solid
        rgba(237,190,83,.35);

    border-radius:50%;

    pointer-events:none;

    animation:
        orgOrbitRotate
        10s
        linear
        infinite;

    box-shadow:

        0 0 25px
        rgba(220,168,61,.14);

}


.organization .org-node-orbit::after{

    content:"";

    position:absolute;

    inset:10px;

    border:
        1px dashed
        rgba(242,202,111,.28);

    border-radius:50%;

    animation:
        orgOrbitReverse
        14s
        linear
        infinite;

}


@keyframes orgOrbitRotate{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


@keyframes orgOrbitReverse{

    from{

        transform:
            rotate(360deg);

    }

    to{

        transform:
            rotate(0deg);

    }

}


/* =========================================================
   ENERGY POINT
   ========================================================= */

.organization .org-node-energy{

    position:absolute;

    top:-6px;

    left:50%;

    width:12px;

    height:12px;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:
        rgba(255,237,174,1);

    box-shadow:

        0 0 10px
        rgba(255,226,139,1),

        0 0 25px
        rgba(232,183,73,.95),

        0 0 55px
        rgba(214,158,49,.7);

    animation:
        orgEnergyNodePulse
        2s
        ease-in-out
        infinite;

}


@keyframes orgEnergyNodePulse{

    0%,
    100%{

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

        opacity:.55;

    }

    50%{

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

        opacity:1;

    }

}


/* =========================================================
   LABEL
   ========================================================= */

.organization .org-node-label{

    display:block;

    margin-bottom:10px;

    font-size:.62rem;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:
        rgba(234,191,96,.82);

}


/* =========================================================
   TITLES
   ========================================================= */

.organization .org-node h3{

    margin:0;

    transition:

        color
        .4s
        ease,

        transform
        .4s
        ease,

        text-shadow
        .4s
        ease;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.organization .org-node p{

    max-width:280px;

    margin:
        12px
        0
        0;

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

}


/* =========================================================
   HOVER
   ========================================================= */

.organization .org-node:hover{

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

    border-color:
        rgba(245,204,113,.75);

    box-shadow:

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

        0 0 50px
        rgba(221,169,62,.25);

}


/* =========================================================
   HOVER ENERGY
   ========================================================= */

.organization .org-node:hover
.org-node-energy{

    animation-duration:1s;

    box-shadow:

        0 0 15px
        rgba(255,241,187,1),

        0 0 40px
        rgba(230,178,68,1),

        0 0 75px
        rgba(211,151,41,.65);

}


/* =========================================================
   NETWORK STATUS
   ========================================================= */

.organization .org-network-status{

    position:relative;

    z-index:6;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:65px;

    font-size:.6rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:
        rgba(231,186,88,.7);

}


/* =========================================================
   STATUS PULSE
   ========================================================= */

.organization .status-pulse{

    width:7px;

    height:7px;

    border-radius:50%;

    background:
        rgba(255,229,151,1);

    box-shadow:

        0 0 10px
        rgba(255,225,135,1),

        0 0 25px
        rgba(218,165,58,.8);

    animation:
        orgStatusPulse
        2s
        ease-in-out
        infinite;

}


@keyframes orgStatusPulse{

    0%,
    100%{

        transform:
            scale(.7);

        opacity:.5;

    }

    50%{

        transform:
            scale(1.4);

        opacity:1;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1050px){

    .organization .org-chart{

        padding-left:20px;

        padding-right:20px;

    }


    .organization .org-level-pillars,
    .organization .org-level-ecosystem{

        gap:18px;

    }


    .organization .org-node{

        padding:
            26px
            16px;

    }

}


/* =========================================================
   MOBILE
   PERFORMANCE-FIRST
   ========================================================= */

@media (max-width:430px){

    .organization{

        width:100%;

        max-width:100%;

        overflow:hidden;

        contain:
            layout
            paint;

    }


    .organization .org-chart{

        width:100%;

        min-height:900px;

        padding:
            60px
            0
            80px;

        display:block;

        overflow-x:auto;

        overflow-y:visible;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-x:contain;

        scrollbar-width:none;

        contain:
            layout
            paint;

    }


    .organization .org-chart::-webkit-scrollbar{

        display:none;

    }


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

    .organization .org-level-core{

        width:100%;

        min-width:100%;

        min-height:210px;

        display:flex;

        justify-content:center;

        align-items:center;

        margin-bottom:55px;

    }


    .organization .org-core-node{

        width:
            min(460px,88vw);

    }


    /* -----------------------------------------
       FOUR PILLARS
       ----------------------------------------- */

    .organization .org-level-pillars{

        width:760px;

        min-width:760px;

        display:grid;

        grid-template-columns:
            repeat(4,178px);

        gap:14px;

        margin:
            0
            0
            90px;

        padding:
            0
            12px;

        box-sizing:border-box;

    }


    /* -----------------------------------------
       FOUR ECOSYSTEM
       ----------------------------------------- */

    .organization .org-level-ecosystem{

        width:760px;

        min-width:760px;

        display:grid;

        grid-template-columns:
            repeat(4,178px);

        gap:14px;

        margin:
            0;

        padding:
            0
            12px;

        box-sizing:border-box;

    }


    /* -----------------------------------------
       CARD SIZES
       ----------------------------------------- */

    .organization .org-pillar-node{

        width:178px;

        min-width:178px;

        height:205px;

        min-height:205px;

        padding:
            22px
            12px;

    }


    .organization .org-ecosystem-node{

        width:178px;

        min-width:178px;

        height:175px;

        min-height:175px;

        padding:
            20px
            12px;

    }


    /* -----------------------------------------
       CRITICAL PERFORMANCE FIX
       ----------------------------------------- */

    .organization .org-energy-network{

        display:none !important;

    }


    /* -----------------------------------------
       REMOVE SVG ANIMATION COST
       ----------------------------------------- */

    .organization .org-energy-path,
    .organization .org-energy-flow{

        animation:none !important;

        filter:none !important;

    }


    /* -----------------------------------------
       REMOVE HEAVY ORBIT
       ----------------------------------------- */

    .organization .org-node-orbit{

        animation:none !important;

        box-shadow:none;

        opacity:.35;

    }


    .organization .org-node-orbit::after{

        animation:none !important;

    }


    /* -----------------------------------------
       LIGHTWEIGHT ENERGY POINT
       ----------------------------------------- */

    .organization .org-node-energy{

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

        box-shadow:

            0 0 7px
            rgba(255,226,139,.95),

            0 0 16px
            rgba(225,169,58,.65);

    }


    @keyframes orgMobileEnergyPulse{

        0%,
        100%{

            opacity:.5;

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

        }

        50%{

            opacity:1;

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

        }

    }


    /* -----------------------------------------
       LIGHT ENERGY LINES
       ----------------------------------------- */

    .organization .org-level-pillars,
    .organization .org-level-ecosystem{

        position:relative;

    }


    .organization .org-level-pillars::before,
    .organization .org-level-ecosystem::before{

        content:"";

        position:absolute;

        top:-24px;

        left:12px;

        width:736px;

        height:2px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(224,174,67,.35),
                rgba(255,225,135,.95),
                rgba(224,174,67,.35),
                transparent
            );

        box-shadow:
            0 0 7px
            rgba(230,180,70,.55);

        pointer-events:none;

    }


    .organization .org-pillar-node:not(:last-child)::after,
    .organization .org-ecosystem-node:not(:last-child)::after{

        content:"";

        position:absolute;

        top:50%;

        right:-14px;

        width:14px;

        height:2px;

        background:
            linear-gradient(
                90deg,
                rgba(220,165,55,.25),
                rgba(255,225,140,.95),
                rgba(220,165,55,.25)
            );

        box-shadow:
            0 0 6px
            rgba(238,193,85,.65);

        pointer-events:none;

    }


    /* -----------------------------------------
       MOBILE TEXT
       ----------------------------------------- */

    .organization .org-node-label{

        font-size:.54rem;

        letter-spacing:.14em;

    }


    .organization .org-node p{

        font-size:.78rem;

        line-height:1.5;

    }


    /* -----------------------------------------
       REMOVE HOVER TRANSFORM
       ----------------------------------------- */

    .organization .org-node:hover{

        transform:none;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:430px){

    .organization .org-level-pillars,
    .organization .org-level-ecosystem{

        width:740px;

        min-width:740px;

    }


    .organization .org-pillar-node,
    .organization .org-ecosystem-node{

        width:170px;

        min-width:170px;

    }


    .organization .org-level-pillars::before,
    .organization .org-level-ecosystem::before{

        width:716px;

    }


    .organization .org-node-label{

        font-size:.52rem;

        letter-spacing:.12em;

    }

}


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

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

    .organization .org-node,
    .organization .org-energy-path,
    .organization .org-energy-flow,
    .organization .org-node-orbit,
    .organization .org-node-energy,
    .organization .status-pulse{

        animation:none !important;

    }

    }
/* =========================================================
ARS HERITAGE GROUP
PREMIUM LEADERSHIP SYSTEM
INDUSTRIAL × TECHNOLOGY × VISION
REPLACE OLD LEADERSHIP CSS COMPLETELY
========================================================= */

.leadership{
position:relative;
isolation:isolate;
padding:clamp(100px,10vw,170px) 5%;
overflow:hidden;
background:
radial-gradient(
circle at 50% 48%,
rgba(9,24,48,.22),
transparent 34%
),
linear-gradient(
180deg,
rgba(2,8,18,.96),
rgba(3,10,22,.99)
);
}

/* =========================================================
SUBTLE INDUSTRIAL ENERGY FIELD
========================================================= */

.leadership::before{
content:"";
position:absolute;
inset:0;
z-index:-3;
pointer-events:none;

background-image:
    radial-gradient(
        circle,
        rgba(228,185,95,.18) 1px,
        transparent 1.5px
    );

background-size:90px 90px;
opacity:.12;

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

}

/* =========================================================
CENTRAL INDUSTRIAL LIGHT
========================================================= */

.leadership::after{
content:"";
position:absolute;
width:650px;
height:650px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:-2;
pointer-events:none;

background:
    radial-gradient(
        circle,
        rgba(184,137,63,.10) 0%,
        rgba(18,45,78,.10) 22%,
        transparent 68%
    );

filter:blur(18px);

}

/* =========================================================
SECTION HEADER
========================================================= */

.leadership .section-header{
position:relative;
z-index:5;
max-width:900px;
margin:0 auto 90px;
text-align:center;
}

.leadership .section-label{
color:rgba(228,185,95,.72);
letter-spacing:.34em;
font-size:.72rem;
font-weight:600;
}

.leadership .section-header h2{
margin-top:18px;
color:#f4f1e8;
letter-spacing:.03em;
}

.leadership .section-header p{
max-width:650px;
margin:20px auto 0;
color:rgba(225,231,240,.48);
}

/* =========================================================
LEADERSHIP SYSTEM
========================================================= */

.leadership-system{
position:relative;
width:min(1180px,100%);
margin:0 auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(45px,7vw,110px);

align-items:stretch;

}

/* =========================================================
LEADER CARD — BASE
========================================================= */

.leader-card{
position:relative;
min-height:510px;
padding:65px 52px 48px;

display:flex;
flex-direction:column;
justify-content:flex-end;

overflow:hidden;
isolation:isolate;

border-radius:28px;

background:
    linear-gradient(
        145deg,
        rgba(14,35,62,.34),
        rgba(4,12,24,.62)
    );

border:
    1px solid
    rgba(110,140,175,.14);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -30px 70px rgba(0,0,0,.18),
    0 30px 80px rgba(0,0,0,.28);

backdrop-filter:
    blur(18px)
    saturate(120%);

-webkit-backdrop-filter:
    blur(18px)
    saturate(120%);

transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    border-color .7s ease,
    box-shadow .7s ease;

}

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

.leader-card:hover{
transform:
translateY(-10px);

border-color:
    rgba(228,185,95,.24);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 35px 90px rgba(0,0,0,.38),
    0 0 60px rgba(184,137,63,.06);

}

/* =========================================================
TOP TECHNICAL EDGE
========================================================= */

.leader-card::before{
content:"";
position:absolute;
top:0;
left:12%;
right:12%;
height:1px;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(228,185,95,.5),
        transparent
    );

opacity:.45;

}

/* =========================================================
INDUSTRIAL GRID INSIDE CARD
========================================================= */

.leader-card::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;

background-image:
    linear-gradient(
        rgba(255,255,255,.018) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.018) 1px,
        transparent 1px
    );

background-size:
    55px 55px;

mask-image:
    linear-gradient(
        180deg,
        black,
        transparent 72%
    );

opacity:.28;

}

/* =========================================================
FOUNDER CARD
VERY LIGHT NAVY
========================================================= */

.leader-founder{
background:
radial-gradient(
circle at 50% 22%,
rgba(20,49,82,.22),
transparent 38%
),
linear-gradient(
145deg,
rgba(17,40,68,.28),
rgba(5,14,27,.58)
);
}

/* =========================================================
ENGINEERING CARD
DARK NAVY / BLACK
========================================================= */

.leader-engineering{
background:
radial-gradient(
circle at 50% 22%,
rgba(10,31,57,.18),
transparent 38%
),
linear-gradient(
145deg,
rgba(8,23,43,.34),
rgba(2,7,15,.72)
);
}

/* =========================================================
ENERGY CORE — MAIN SYSTEM
========================================================= */

.leader-visual-core{
position:absolute;
top:58px;
left:50%;
width:230px;
height:230px;

transform:
    translateX(-50%);

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

pointer-events:none;

}

/* =========================================================
CORE CENTRAL LIGHT
========================================================= */

.leader-core-light{
position:absolute;
width:30px;
height:30px;

border-radius:50%;

background:
    radial-gradient(
        circle,
        #fff4cf 0%,
        #e4b95f 28%,
        rgba(184,137,63,.4) 55%,
        transparent 72%
    );

box-shadow:
    0 0 18px rgba(228,185,95,.75),
    0 0 45px rgba(184,137,63,.28);

animation:
    leaderCorePulse 3.8s ease-in-out infinite;

}

/* =========================================================
CORE HALO
========================================================= */

.leader-core-halo{
position:absolute;
width:115px;
height:115px;

border-radius:50%;

background:
    radial-gradient(
        circle,
        rgba(228,185,95,.12),
        transparent 68%
    );

filter:blur(5px);

animation:
    haloBreath 4.5s ease-in-out infinite;

}

/* =========================================================
PRIMARY ENERGY ORBIT
========================================================= */

.leader-core-orbit{
position:absolute;
border-radius:50%;

border:
    1px solid
    rgba(228,185,95,.22);

box-shadow:
    0 0 18px rgba(184,137,63,.07);

transform-style:preserve-3d;

}

/* =========================================================
OUTER ORBIT
========================================================= */

.orbit-primary{
width:190px;
height:190px;

border-color:
    rgba(228,185,95,.18);

transform:
    rotateX(68deg)
    rotateZ(-18deg);

animation:
    orbitPrimary 18s linear infinite;

}

/* =========================================================
INNER ORBIT
========================================================= */

.orbit-secondary{
width:145px;
height:145px;

border-color:
    rgba(150,177,205,.12);

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

animation:
    orbitSecondary 13s linear infinite reverse;

}

/* =========================================================
TECHNICAL RING — ENGINEERING
========================================================= */

.leader-core-technical-ring{
position:absolute;
width:160px;
height:160px;

border-radius:50%;

border:
    1px dashed
    rgba(228,185,95,.17);

animation:
    technicalRotate 25s linear infinite;

}

/* =========================================================
ENERGY DOTS AROUND CORE
========================================================= */

.leader-visual-core::before,
.leader-visual-core::after{
content:"";
position:absolute;

width:6px;
height:6px;

border-radius:50%;

background:#e4b95f;

box-shadow:
    0 0 12px rgba(228,185,95,.8);

}

.leader-visual-core::before{
top:25px;
right:42px;

animation:
    energyDotA 5s linear infinite;

}

.leader-visual-core::after{
bottom:34px;
left:35px;

opacity:.65;

animation:
    energyDotB 7s linear infinite;

}

/* =========================================================
LEADER CONTENT
========================================================= */

.leader-content{
position:relative;
z-index:5;
margin-top:240px;
}

/* =========================================================
INDEX
========================================================= */

.leader-index{
display:block;

color:
    rgba(228,185,95,.48);

font-size:.68rem;
letter-spacing:.28em;

margin-bottom:14px;

}

/* =========================================================
CATEGORY
========================================================= */

.leader-category{
display:block;

color:
    rgba(180,195,212,.45);

font-size:.66rem;
letter-spacing:.24em;

margin-bottom:16px;

}

/* =========================================================
NAME
========================================================= */

.leader-name{
margin:0;

color:#f2eee5;

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

letter-spacing:
    -.025em;

}

/* =========================================================
ROLE
========================================================= */

.leader-role{
display:block;

margin-top:12px;

color:
    rgba(228,185,95,.68);

font-size:.8rem;
letter-spacing:.1em;

}

/* =========================================================
ORGANIZATION
========================================================= */

.leader-organization{
display:block;

margin-top:8px;

color:
    rgba(205,215,227,.35);

font-size:.62rem;
letter-spacing:.24em;

}

/* =========================================================
DESCRIPTION
========================================================= */

.leader-description{
max-width:450px;

margin-top:24px;

color:
    rgba(221,229,238,.48);

line-height:1.8;

font-size:.92rem;

}

/* =========================================================
STATUS
========================================================= */

.leader-status{
position:relative;
z-index:5;

display:flex;
align-items:center;
gap:14px;

margin-top:34px;

}

.leader-status-line{
flex:1;
height:1px;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(228,185,95,.18)
    );

}

.leader-status-line:last-child{
background:
linear-gradient(
90deg,
rgba(228,185,95,.18),
transparent
);
}

.leader-status-text{
color:
rgba(228,185,95,.46);

font-size:.58rem;
letter-spacing:.28em;

}

/* =========================================================
ENERGY BRIDGE
CENTRAL CONNECTION BETWEEN CARDS
========================================================= */

.leadership-energy-bridge{
position:absolute;

top:46%;
left:50%;

width:145px;
height:120px;

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

z-index:10;

pointer-events:none;

}

/* =========================================================
BRIDGE MAIN LINE
========================================================= */

.leadership-bridge-line{
position:absolute;

top:50%;
left:0;

width:100%;
height:1px;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(228,185,95,.28),
        rgba(255,244,207,.7),
        rgba(228,185,95,.28),
        transparent
    );

box-shadow:
    0 0 12px rgba(228,185,95,.25);

}

/* =========================================================
BRIDGE ENERGY FLOW
========================================================= */

.leadership-bridge-energy{
position:absolute;

top:50%;
left:-10px;

width:22px;
height:3px;

border-radius:50%;

background:
    #fff4cf;

box-shadow:
    0 0 10px #fff4cf,
    0 0 25px rgba(228,185,95,.8);

animation:
    bridgeFlow 3.2s ease-in-out infinite;

}

/* =========================================================
BRIDGE CENTRAL CORE
========================================================= */

.leadership-bridge-core{
position:absolute;

top:50%;
left:50%;

width:42px;
height:42px;

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

border-radius:50%;

border:
    1px solid
    rgba(228,185,95,.4);

background:
    radial-gradient(
        circle,
        rgba(255,244,207,.28),
        rgba(184,137,63,.08) 45%,
        transparent 72%
    );

box-shadow:
    0 0 20px rgba(228,185,95,.2);

animation:
    bridgeCorePulse 3s ease-in-out infinite;

}

/* =========================================================
BRIDGE CORE RING
========================================================= */

.leadership-bridge-core::before{
content:"";

position:absolute;
inset:-10px;

border-radius:50%;

border:
    1px solid
    rgba(228,185,95,.13);

animation:
    bridgeRing 7s linear infinite;

}

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes orbitPrimary{

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

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

}

@keyframes orbitSecondary{

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

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

}

@keyframes technicalRotate{

from{
    transform:
        rotate(0deg);
}

to{
    transform:
        rotate(360deg);
}

}

@keyframes leaderCorePulse{

0%,
100%{
    transform:scale(.85);
    opacity:.7;
}

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

}

@keyframes haloBreath{

0%,
100%{
    transform:scale(.85);
    opacity:.45;
}

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

}

@keyframes energyDotA{

0%{
    transform:
        rotate(0deg)
        translateX(88px);
}

100%{
    transform:
        rotate(360deg)
        translateX(88px);
}

}

@keyframes energyDotB{

0%{
    transform:
        rotate(360deg)
        translateX(78px);
}

100%{
    transform:
        rotate(0deg)
        translateX(78px);
}

}

@keyframes bridgeFlow{

0%{
    left:0;
    opacity:0;
}

15%{
    opacity:1;
}

85%{
    opacity:1;
}

100%{
    left:calc(100% - 12px);
    opacity:0;
}

}

@keyframes bridgeCorePulse{

0%,
100%{
    transform:
        translate(-50%,-50%)
        scale(.9);
    box-shadow:
        0 0 15px rgba(228,185,95,.16);
}

50%{
    transform:
        translate(-50%,-50%)
        scale(1.08);
    box-shadow:
        0 0 35px rgba(228,185,95,.28);
}

}

@keyframes bridgeRing{

from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}

}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:900px){

.leadership-system{
    grid-template-columns:1fr;
    gap:45px;
}

.leadership-energy-bridge{
    top:50%;
    width:100px;
    height:90px;
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}

}

@media (max-width:600px){

.leadership{
    padding:
        90px 20px;
}

.leader-card{
    min-height:520px;
    padding:
        50px 28px 35px;
    border-radius:22px;
}

.leader-visual-core{
    top:45px;
    width:190px;
    height:190px;
}

.orbit-primary{
    width:160px;
    height:160px;
}

.orbit-secondary{
    width:120px;
    height:120px;
}

.leader-content{
    margin-top:210px;
}

.leadership-energy-bridge{
    display:none;
}

}

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

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

.leader-core-orbit,
.leader-core-technical-ring,
.leader-core-light,
.leader-core-halo,
.leader-visual-core::before,
.leader-visual-core::after,
.leadership-bridge-energy,
.leadership-bridge-core,
.leadership-bridge-core::before{
    animation:none;
}

.leader-card{
    transition:none;
}

}
/* =========================================================
   ARS HERITAGE GROUP
   TECHNOLOGY ECOSYSTEM
   ISOLATED INDUSTRIAL AUTOMOTIVE TECHNOLOGY NETWORK
   PREMIUM AUTOMOTIVE TECHNOLOGY ARCHITECTURE
   ========================================================= */


/* =========================================================
   TECHNOLOGY ROOT
   ========================================================= */

.technology-ecosystem{

    position:relative;

    width:100%;

    padding:
        clamp(130px,11vw,190px)
        0
        clamp(130px,10vw,180px);

    overflow:hidden;

    isolation:isolate;

    background:

        radial-gradient(
            ellipse at 50% 45%,
            rgba(190,140,45,.055),
            transparent 55%
        );

}


/* =========================================================
   DEEP INDUSTRIAL ATMOSPHERE
   ========================================================= */

.technology-ecosystem::before{

    content:"";

    position:absolute;

    inset:-20%;

    z-index:-5;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at 15% 35%,
            rgba(214,165,66,.14),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 85% 65%,
            rgba(214,165,66,.11),
            transparent 30%
        ),

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

    filter:blur(65px);

    animation:
        techAtmosphere
        14s
        ease-in-out
        infinite
        alternate;

}


@keyframes techAtmosphere{

    0%{

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

    }

    100%{

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

    }

}


/* =========================================================
   PRECISION AUTOMOTIVE GRID
   ========================================================= */

.technology-ecosystem::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:-4;

    pointer-events:none;

    opacity:.13;

    background-image:

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

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

    background-size:
        80px 80px;

    mask-image:

        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 74%
        );

    -webkit-mask-image:

        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 74%
        );

}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.technology-ecosystem
.section-header{

    position:relative;

    z-index:20;

    width:
        min(900px,90%);

    margin:
        0 auto
        clamp(75px,8vw,115px);

    text-align:center;

}


/* =========================================================
   TECHNOLOGY LABEL
   ========================================================= */

.technology-ecosystem
.section-label{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:18px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.34em;

    text-transform:uppercase;

    color:

        rgba(
            224,
            181,
            91,
            .94
        );

}


/* =========================================================
   LABEL SIDE SIGNALS
   ========================================================= */

.technology-ecosystem
.section-label::before,
.technology-ecosystem
.section-label::after{

    content:"";

    width:48px;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                224,
                181,
                91,
                .8
            )
        );

}


.technology-ecosystem
.section-label::after{

    background:

        linear-gradient(
            90deg,
            rgba(
                224,
                181,
                91,
                .8
            ),
            transparent
        );

}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.technology-ecosystem
.section-header
h2{

    margin:
        22px 0
        18px;

    font-size:
        clamp(
            40px,
            5vw,
            72px
        );

    line-height:1;

    letter-spacing:-.05em;

    color:

        rgba(
            255,
            255,
            255,
            .97
        );

    text-shadow:

        0 0 35px
        rgba(
            255,
            255,
            255,
            .035
        );

}


/* =========================================================
   SECTION DESCRIPTION
   ========================================================= */

.technology-ecosystem
.section-header
p{

    max-width:650px;

    margin:0 auto;

    font-size:14px;

    line-height:1.9;

    color:

        rgba(
            255,
            255,
            255,
            .54
        );

}


/* =========================================================
   TECHNOLOGY NETWORK
   ========================================================= */

.technology-ecosystem
.technology-network{

    position:relative;

    width:
        min(
            1180px,
            90%
        );

    margin:0 auto;

    display:grid;

    grid-template-columns:

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

    gap:30px;

}


/* =========================================================
   NETWORK CENTRAL SIGNAL
   ========================================================= */

.technology-ecosystem
.technology-network::before{

    content:"";

    position:absolute;

    top:50%;

    left:-4%;

    width:108%;

    height:1px;

    z-index:-1;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                214,
                168,
                74,
                .12
            ),
            rgba(
                238,
                204,
                128,
                .42
            ),
            rgba(
                214,
                168,
                74,
                .12
            ),
            transparent
        );

    box-shadow:

        0 0 25px
        rgba(
            218,
            168,
            70,
            .18
        );

    animation:

        techNetworkPulse
        5s
        ease-in-out
        infinite;

}


@keyframes techNetworkPulse{

    0%,
    100%{

        opacity:.25;

    }

    50%{

        opacity:.85;

    }

}


/* =========================================================
   TECHNOLOGY PARTNER CARD
   ========================================================= */

.technology-ecosystem
.technology-partner{

    position:relative;

    min-height:370px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:
        60px
        32px
        55px;

    box-sizing:border-box;

    overflow:hidden;

    isolation:isolate;

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

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .075
            ),
            rgba(
                255,
                255,
                255,
                .012
            )
        );

    backdrop-filter:

        blur(28px)
        saturate(135%);

    -webkit-backdrop-filter:

        blur(28px)
        saturate(135%);

    box-shadow:

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

        0 30px 75px
        rgba(
            0,
            0,
            0,
            .34
        );

    opacity:0;

    transform:

        translateY(45px)
        scale(.965);

    animation:

        techPremiumReveal
        1.1s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        )
        forwards;

    transition:

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

        border-color .5s ease,

        box-shadow .6s ease,

        background .6s ease;

}


/* =========================================================
   ENTRANCE SEQUENCE
   ========================================================= */

.technology-ecosystem
.partner-1{

    animation-delay:.08s;

}

.technology-ecosystem
.partner-2{

    animation-delay:.22s;

}

.technology-ecosystem
.partner-3{

    animation-delay:.36s;

}

.technology-ecosystem
.partner-4{

    animation-delay:.50s;

}

.technology-ecosystem
.partner-5{

    animation-delay:.64s;

}

.technology-ecosystem
.partner-6{

    animation-delay:.78s;

}


@keyframes techPremiumReveal{

    from{

        opacity:0;

        transform:

            translateY(45px)
            scale(.965);

    }

    to{

        opacity:1;

        transform:

            translateY(0)
            scale(1);

    }

}



/* =========================================================
   BACKLIGHT — PREMIUM INDUSTRIAL GLOW
   ========================================================= */

.technology-ecosystem
.technology-partner::before{

    content:"";

    position:absolute;

    inset:12%;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at 50% 55%,
            rgba(
                214,
                165,
                67,
                .16
            ),
            transparent 62%
        );

    filter:blur(35px);

    opacity:.65;

    transition:

        opacity .6s ease,

        transform .8s ease;

}


/* =========================================================
   MOVING INDUSTRIAL LIGHT SCAN
   ========================================================= */

.technology-ecosystem
.technology-partner::after{

    content:"";

    position:absolute;

    top:-30%;

    left:-70%;

    width:28%;

    height:160%;

    pointer-events:none;

    z-index:10;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                230,
                165,
                .06
            ),
            rgba(
                255,
                245,
                205,
                .55
            ),
            rgba(
                255,
                230,
                165,
                .06
            ),
            transparent
        );

    transform:

        skewX(
            -18deg
        );

    opacity:0;

    animation:

        techIndustrialScan
        8s
        ease-in-out
        infinite;

}


.technology-ecosystem
.partner-2::after{

    animation-delay:1.3s;

}

.technology-ecosystem
.partner-3::after{

    animation-delay:2.6s;

}

.technology-ecosystem
.partner-4::after{

    animation-delay:3.9s;

}

.technology-ecosystem
.partner-5::after{

    animation-delay:5.2s;

}

.technology-ecosystem
.partner-6::after{

    animation-delay:6.5s;

}


@keyframes techIndustrialScan{

    0%{

        left:-70%;

        opacity:0;

    }

    18%{

        opacity:.12;

    }

    48%{

        opacity:.7;

    }

    72%{

        opacity:.12;

    }

    100%{

        left:145%;

        opacity:0;

    }

}


/* =========================================================
   INDUSTRIAL CORNER FRAME
   ========================================================= */

.technology-ecosystem
.technology-partner
.partner-index{

    position:absolute;

    top:24px;

    left:28px;

    font-size:9px;

    font-weight:700;

    letter-spacing:.28em;

    color:

        rgba(
            224,
            181,
            91,
            .62
        );

}


/* =========================================================
   CORNER FRAME MARK
   ========================================================= */

.technology-ecosystem
.technology-partner
.partner-index::before{

    content:"";

    position:absolute;

    top:-6px;

    left:-8px;

    width:20px;

    height:20px;

    border-top:
        1px solid
        rgba(
            224,
            181,
            91,
            .55
        );

    border-left:
        1px solid
        rgba(
            224,
            181,
            91,
            .55
        );

}


/* =========================================================
   INDEX UNDERLINE
   ========================================================= */

.technology-ecosystem
.technology-partner
.partner-index::after{

    content:"";

    display:block;

    width:30px;

    height:1px;

    margin-top:7px;

    background:

        rgba(
            224,
            181,
            91,
            .48
        );

}


/* =========================================================
   INDUSTRIAL TECH BAR
   NO CIRCLE
   ========================================================= */

.technology-ecosystem
.partner-energy-core{

    position:relative;

    width:120px;

    height:2px;

    margin:

        0
        0
        38px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                238,
                181,
                .95
            ),
            transparent
        );

    box-shadow:

        0 0 14px
        rgba(
            224,
            174,
            74,
            .65
        );

}


/* =========================================================
   TECH BAR SIDE EXTENSIONS
   ========================================================= */

.technology-ecosystem
.partner-energy-core::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:18px;

    transform:
        translateY(-50%);

    border-top:
        1px solid
        rgba(
            224,
            174,
            74,
            .18
        );

    border-bottom:
        1px solid
        rgba(
            224,
            174,
            74,
            .10
        );

}


/* =========================================================
   MOVING TECH SIGNAL
   ========================================================= */

.technology-ecosystem
.partner-energy-core::after{

    content:"";

    position:absolute;

    top:50%;

    left:-10px;

    width:20px;

    height:3px;

    transform:
        translateY(-50%);

    background:

        rgba(
            255,
            247,
            211,
            1
        );

    box-shadow:

        0 0 8px
        rgba(
            255,
            239,
            183,
            1
        ),

        0 0 24px
        rgba(
            224,
            174,
            74,
            .95
        );

    animation:

        techSignalTravel
        2.8s
        linear
        infinite;

}


@keyframes techSignalTravel{

    0%{

        left:-10px;

        opacity:0;

    }

    12%{

        opacity:1;

    }

    50%{

        opacity:1;

    }

    88%{

        opacity:1;

    }

    100%{

        left:110px;

        opacity:0;

    }

}


/* =========================================================
   PARTNER CATEGORY
   ========================================================= */

.technology-ecosystem
.technology-partner
.partner-category{

    display:block;

    margin-bottom:14px;

    font-size:9px;

    font-weight:700;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:

        rgba(
            222,
            180,
            91,
            .84
        );

}


/* =========================================================
   PARTNER NAME
   ========================================================= */

.technology-ecosystem
.technology-partner
h3{

    position:relative;

    z-index:20;

    margin:

        0
        0
        18px;

    font-size:

        clamp(
            26px,
            2.4vw,
            36px
        );

    line-height:1.1;

    letter-spacing:-.025em;

    color:

        rgba(
            255,
            255,
            255,
            .98
        );

    text-shadow:

        0 0 28px
        rgba(
            255,
            255,
            255,
            .04
        );

    transition:

        color .45s ease,

        transform .45s ease,

        text-shadow .45s ease;

}


/* =========================================================
   PARTNER NAME GOLD SIGNAL
   ========================================================= */

.technology-ecosystem
.technology-partner
h3::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:1px;

    transform:

        translateX(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                230,
                187,
                94,
                .95
            ),
            transparent
        );

    box-shadow:

        0 0 14px
        rgba(
            225,
            176,
            74,
            .45
        );

    transition:

        width .5s ease;

}


/* =========================================================
   PARTNER DESCRIPTION
   ========================================================= */

.technology-ecosystem
.technology-partner
p{

    position:relative;

    z-index:20;

    max-width:300px;

    margin:0;

    font-size:13px;

    line-height:1.9;

    color:

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

}


/* =========================================================
   BOTTOM INDUSTRIAL RAIL
   ========================================================= */

.technology-ecosystem
.partner-energy-line{

    position:absolute;

    left:50%;

    bottom:25px;

    width:100px;

    height:1px;

    transform:

        translateX(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                218,
                172,
                82,
                .65
            ),
            transparent
        );

}


/* =========================================================
   MOVING SIGNAL ON BOTTOM RAIL
   ========================================================= */

.technology-ecosystem
.partner-energy-line::after{

    content:"";

    position:absolute;

    top:50%;

    left:-15px;

    width:15px;

    height:2px;

    transform:

        translateY(-50%);

    background:

        rgba(
            255,
            239,
            181,
            1
        );

    box-shadow:

        0 0 10px
        rgba(
            255,
            229,
            151,
            .95
        );

    animation:

        techBottomSignal
        3.2s
        linear
        infinite;

}


@keyframes techBottomSignal{

    0%{

        left:-15px;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        left:100px;

        opacity:0;

    }

}


/* =========================================================
   HOVER — PREMIUM AUTOMOTIVE TECHNOLOGY
   ========================================================= */

.technology-ecosystem
.technology-partner:hover{

    transform:

        translateY(-14px)
        scale(1.018);

    border-color:

        rgba(
            225,
            184,
            97,
            .42
        );

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .095
            ),
            rgba(
                255,
                255,
                255,
                .018
            )
        );

    box-shadow:

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

        0 45px 110px
        rgba(
            0,
            0,
            0,
            .44
        ),

        0 0 75px
        rgba(
            216,
            166,
            69,
            .16
        );

}


/* =========================================================
   HOVER BACKLIGHT
   ========================================================= */

.technology-ecosystem
.technology-partner:hover::before{

    opacity:1;

    transform:

        scale(1.25);

}


/* =========================================================
   HOVER PARTNER NAME
   ========================================================= */

.technology-ecosystem
.technology-partner:hover
h3{

    color:

        rgba(
            255,
            248,
            220,
            1
        );

    transform:

        translateY(-3px);

    text-shadow:

        0 0 30px
        rgba(
            227,
            184,
            95,
            .24
        );

}


.technology-ecosystem
.technology-partner:hover
h3::after{

    width:90px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1050px){

    .technology-ecosystem
    .technology-network{

        grid-template-columns:

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

        gap:24px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:680px){

    .technology-ecosystem{

        padding:

            90px
            0
            105px;

    }

    .technology-ecosystem
    .section-header{

        width:88%;

        margin-bottom:60px;

    }

    .technology-ecosystem
    .technology-network{

        grid-template-columns:

            1fr;

        width:88%;

        gap:22px;

    }

    .technology-ecosystem
    .technology-network::before{

        display:none;

    }

    .technology-ecosystem
    .technology-partner{

        min-height:350px;

        padding:

            50px
            24px
            45px;

    }

    .technology-ecosystem
    .technology-partner:hover{

        transform:

            translateY(-8px);

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:430px){

    .technology-ecosystem
    .technology-network{

        width:90%;

    }

    .technology-ecosystem
    .technology-partner{

        min-height:330px;

        padding:

            45px
            20px
            42px;

    }

    .technology-ecosystem
    .partner-category{

        font-size:8px;

        letter-spacing:.18em;

    }

    .technology-ecosystem
    .technology-partner
    h3{

        font-size:24px;

    }

}


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

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

    .technology-ecosystem
    .technology-partner{

        opacity:1;

        transform:none;

        animation:none;

        transition:none;

    }

    .technology-ecosystem::before,
    .technology-ecosystem::after,
    .technology-ecosystem
    .technology-network::before,
    .technology-ecosystem
    .technology-partner::after,
    .technology-ecosystem
    .partner-energy-core::after,
    .technology-ecosystem
    .partner-energy-line::after{

        animation:none;

    }

    .technology-ecosystem
    .technology-partner:hover{

        transform:none;

    }

}
/* =========================================================
ARS ENGINEERING STANDARDS
INDUSTRIAL ENGINEERING DISCIPLINE SYSTEM
PRECISION • SAFETY • RELIABILITY • MODULARITY
========================================================= */

/* =========================================================
SECTION ROOT
========================================================= */

.engineering-standards{

position:relative;

width:100%;

padding:
    clamp(100px,10vw,170px)
    0
    clamp(100px,10vw,160px);

overflow:hidden;

isolation:isolate;

}

/* =========================================================
INDUSTRIAL AMBIENT FIELD
========================================================= */

.engineering-standards::before{

content:"";

position:absolute;

inset:8% 10%;

z-index:-3;

pointer-events:none;

background:

    radial-gradient(
        circle at 50% 45%,
        rgba(196,151,72,.12),
        transparent 27%
    ),

    radial-gradient(
        circle at 18% 60%,
        rgba(255,255,255,.022),
        transparent 24%
    ),

    radial-gradient(
        circle at 82% 38%,
        rgba(255,255,255,.02),
        transparent 24%
    );

filter:blur(42px);

}

/* =========================================================
ENGINEERING PRECISION GRID
========================================================= */

.engineering-standards::after{

content:"";

position:absolute;

inset:0;

z-index:-2;

pointer-events:none;

opacity:.16;

background-image:

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

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

background-size:
    80px 80px;

mask-image:

    radial-gradient(
        ellipse at center,
        black 0%,
        transparent 70%
    );

-webkit-mask-image:

    radial-gradient(
        ellipse at center,
        black 0%,
        transparent 70%
    );

}

/* =========================================================
SECTION HEADER
========================================================= */

.engineering-standards
.section-header{

position:relative;

z-index:5;

width:min(820px,90%);

margin:
    0 auto
    clamp(65px,8vw,105px);

text-align:center;

}

/* =========================================================
ENGINEERING LABEL
========================================================= */

.engineering-standards
.section-header
.section-label{

display:inline-flex;

align-items:center;

gap:15px;

font-size:10px;

font-weight:700;

letter-spacing:.3em;

text-transform:uppercase;

color:

    rgba(211,171,91,.9);

}

.engineering-standards
.section-header
.section-label::before,
.engineering-standards
.section-header
.section-label::after{

content:"";

width:34px;

height:1px;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(214,170,84,.75)
    );

}

.engineering-standards
.section-header
.section-label::after{

background:

    linear-gradient(
        90deg,
        rgba(214,170,84,.75),
        transparent
    );

}

/* =========================================================
ENGINEERING TITLE
========================================================= */

.engineering-standards
.section-header
h2{

margin:
    20px 0
    18px;

font-size:
    clamp(35px,4.5vw,64px);

line-height:1.04;

letter-spacing:-.04em;

color:

    rgba(255,255,255,.96);

}

/* =========================================================
STANDARDS GRID
========================================================= */

.engineering-standards
.standards-grid{

position:relative;

display:grid;

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

gap:
    clamp(22px,3vw,42px);

width:min(1180px,90%);

margin:0 auto;

}

/* =========================================================
CENTRAL ENGINEERING AXIS
========================================================= */

.engineering-standards
.standards-grid::before{

content:"";

position:absolute;

top:50%;

left:8%;

right:8%;

height:1px;

transform:
    translateY(-50%);

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(199,154,68,.18) 10%,
        rgba(211,168,82,.55) 50%,
        rgba(199,154,68,.18) 90%,
        transparent
    );

box-shadow:

    0 0 18px
    rgba(205,158,69,.12);

pointer-events:none;

z-index:0;

}

/* =========================================================
ENGINEERING STANDARD CARD
========================================================= */

.engineering-standards
.standard-card{

position:relative;

min-height:360px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:flex-end;

text-align:center;

padding:
    170px
    clamp(24px,3vw,42px)
    42px;

overflow:hidden;

border:

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

background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.065),
        rgba(255,255,255,.015)
    );

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

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

box-shadow:

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

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

transition:

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

    border-color .55s ease,

    box-shadow .55s ease,

    background .55s ease;

opacity:0;

animation:

    engineering-card-reveal
    .95s
    cubic-bezier(.2,.75,.2,1)
    forwards;

}

/* =========================================================
SEQUENTIAL REVEAL
========================================================= */

.engineering-standards
.standard-card:nth-child(1){

animation-delay:.15s;

}

.engineering-standards
.standard-card:nth-child(2){

animation-delay:.32s;

}

.engineering-standards
.standard-card:nth-child(3){

animation-delay:.49s;

}

@keyframes engineering-card-reveal{

from{

    opacity:0;

    transform:
        translateY(38px)
        scale(.97);

}

to{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}

}

/* =========================================================
ENGINEERING CORE
========================================================= */

.engineering-standards
.standard-card::before{

content:"";

position:absolute;

top:50px;

left:50%;

width:125px;

height:125px;

transform:
    translateX(-50%);

border-radius:50%;

background:

    radial-gradient(
        circle,
        rgba(255,244,194,.9) 0 3%,
        rgba(223,182,94,.72) 7%,
        rgba(197,145,53,.28) 22%,
        rgba(197,145,53,.08) 42%,
        transparent 70%
    );

box-shadow:

    0 0 14px
    rgba(231,190,100,.55),

    0 0 35px
    rgba(209,157,62,.28),

    0 0 75px
    rgba(209,157,62,.12);

animation:

    engineering-core-pulse
    4.5s
    ease-in-out
    infinite;

z-index:1;

}

/* =========================================================
CORE RING
========================================================= */

.engineering-standards
.standard-card::after{

content:"";

position:absolute;

top:61px;

left:50%;

width:103px;

height:103px;

transform:
    translateX(-50%);

border-radius:50%;

border:

    1px solid
    rgba(222,181,96,.32);

box-shadow:

    0 0 0 9px
    rgba(208,159,67,.025),

    0 0 0 18px
    rgba(208,159,67,.018);

animation:

    engineering-ring-rotate
    16s
    linear
    infinite;

z-index:2;

}

@keyframes engineering-core-pulse{

0%,
100%{

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

    opacity:.68;

}

50%{

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

    opacity:1;

}

}

@keyframes engineering-ring-rotate{

from{

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

}

to{

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

}

}

/* =========================================================
CORE INNER POINT
========================================================= */

.engineering-standards
.standard-card
h3::before{

content:"";

position:absolute;

top:-105px;

left:50%;

width:7px;

height:7px;

transform:
    translateX(-50%);

border-radius:50%;

background:

    rgba(255,249,218,1);

box-shadow:

    0 0 8px
    rgba(255,244,196,1),

    0 0 20px
    rgba(228,184,88,.95),

    0 0 38px
    rgba(215,157,48,.55);

z-index:5;

}

/* =========================================================
STANDARD TITLE
========================================================= */

.engineering-standards
.standard-card
h3{

position:relative;

z-index:5;

margin:
    0 0
    16px;

font-size:
    clamp(22px,1.8vw,30px);

line-height:1.15;

letter-spacing:-.025em;

color:

    rgba(255,255,255,.95);

transition:

    color .45s ease,

    text-shadow .45s ease,

    transform .45s ease;

}

/* =========================================================
STANDARD DESCRIPTION
========================================================= */

.engineering-standards
.standard-card
p{

position:relative;

z-index:5;

max-width:300px;

margin:0;

font-size:14px;

line-height:1.85;

color:

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

}

/* =========================================================
CARD TECHNICAL FRAME
========================================================= */

.engineering-standards
.standard-card
h3::after{

content:"";

position:absolute;

left:50%;

bottom:-10px;

width:0;

height:1px;

transform:
    translateX(-50%);

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(218,174,84,.8),
        transparent
    );

transition:

    width .55s ease;

}

/* =========================================================
HOVER
========================================================= */

.engineering-standards
.standard-card:hover{

transform:
    translateY(-12px);

border-color:

    rgba(214,169,82,.32);

background:

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

box-shadow:

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

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

    0 0 40px
    rgba(204,155,62,.09);

}

.engineering-standards
.standard-card:hover
h3{

color:

    rgba(255,249,224,1);

transform:
    translateY(-2px);

text-shadow:

    0 0 20px
    rgba(227,184,95,.22);

}

.engineering-standards
.standard-card:hover
h3::after{

width:80px;

}

.engineering-standards
.standard-card:hover::before{

box-shadow:

    0 0 18px
    rgba(241,202,119,.85),

    0 0 45px
    rgba(215,162,66,.42),

    0 0 90px
    rgba(215,162,66,.16);

}

/* =========================================================
SPECIALIZED STANDARD IDENTITIES
========================================================= */

/* SAFETY */

.engineering-standards
.standard-card:nth-child(1)::before{

background:

    radial-gradient(
        circle,
        rgba(255,246,204,.95) 0 3%,
        rgba(220,179,88,.72) 8%,
        rgba(195,141,45,.25) 25%,
        transparent 70%
    );

}

/* RELIABILITY */

.engineering-standards
.standard-card:nth-child(2)::before{

animation-duration:

    5.2s;

}

/* MODULARITY */

.engineering-standards
.standard-card:nth-child(3)::before{

animation-duration:

    3.8s;

}

/* =========================================================
ENERGY TRAVEL THROUGH ENGINEERING AXIS
========================================================= */

.engineering-standards
.standards-grid
.standard-card:nth-child(1){

animation-name:

    engineering-card-reveal,
    engineering-energy-pulse;

animation-duration:

    .95s,
    6s;

animation-delay:

    .15s,
    2.5s;

animation-iteration-count:

    1,
    infinite;

}

@keyframes engineering-energy-pulse{

0%,
100%{

    box-shadow:

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

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

}

50%{

    box-shadow:

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

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

        0 0 32px
        rgba(205,157,66,.055);

}

}

/* =========================================================
TABLET
========================================================= */

@media (max-width:950px){

.engineering-standards
.standards-grid{

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

    gap:24px;

}


.engineering-standards
.standards-grid::before{

    display:none;

}


.engineering-standards
.standard-card{

    min-height:330px;

}


.engineering-standards
.standard-card:nth-child(3){

    grid-column:
        1 / -1;

    width:
        calc(50% - 12px);

    margin:0 auto;

}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width:620px){

.engineering-standards{

    padding:
        85px
        0
        90px;

}


.engineering-standards
.section-header{

    margin-bottom:60px;

}


.engineering-standards
.standards-grid{

    grid-template-columns:
        1fr;

    width:88%;

    gap:20px;

}


.engineering-standards
.standard-card{

    min-height:330px;

    padding:
        165px
        24px
        36px;

}


.engineering-standards
.standard-card:nth-child(3){

    grid-column:auto;

    width:auto;

}


.engineering-standards
.standard-card:hover{

    transform:
        translateY(-6px);

}

}

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

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

.engineering-standards
.standard-card{

    opacity:1;

    animation:none;

    transform:none;

    transition:none;

}


.engineering-standards
.standard-card::before,
.engineering-standards
.standard-card::after{

    animation:none;

}


.engineering-standards
.standard-card:hover{

    transform:none;

}

}
/* =========================================================
ARS TIMELINE — INDUSTRIAL JOURNEY
PREMIUM ENERGY TIMELINE SYSTEM
========================================================= */

/* =========================================================
TIMELINE SECTION
========================================================= */

.timeline{

position:relative;

width:100%;

padding:
    clamp(100px,10vw,170px)
    0
    clamp(100px,10vw,160px);

overflow:hidden;

isolation:isolate;

}

/* =========================================================
AMBIENT INDUSTRIAL FIELD
========================================================= */

.timeline::before{

content:"";

position:absolute;

inset:8% 10%;

background:

    radial-gradient(
        circle at 50% 48%,
        rgba(196,151,72,.12),
        transparent 30%
    ),

    radial-gradient(
        circle at 15% 60%,
        rgba(255,255,255,.025),
        transparent 25%
    ),

    radial-gradient(
        circle at 85% 35%,
        rgba(255,255,255,.02),
        transparent 25%
    );

filter:blur(35px);

pointer-events:none;

z-index:-2;

}

/* =========================================================
SECTION HEADER
========================================================= */

.timeline .section-header{

position:relative;

z-index:5;

max-width:760px;

margin:
    0 auto
    clamp(70px,8vw,110px);

text-align:center;

}

.timeline .section-header .section-label{

display:inline-flex;

align-items:center;

gap:14px;

font-size:10px;

font-weight:700;

letter-spacing:.28em;

text-transform:uppercase;

color:rgba(205,166,91,.88);

}

.timeline .section-header .section-label::before,
.timeline .section-header .section-label::after{

content:"";

width:28px;

height:1px;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(205,166,91,.7)
    );

}

.timeline .section-header .section-label::after{

background:
    linear-gradient(
        90deg,
        rgba(205,166,91,.7),
        transparent
    );

}

.timeline .section-header h2{

margin:
    18px 0
    16px;

font-size:
    clamp(34px,4vw,62px);

line-height:1.05;

letter-spacing:-.035em;

}

.timeline .section-header p{

max-width:620px;

margin:0 auto;

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

font-size:clamp(14px,1.2vw,17px);

line-height:1.8;

}

/* =========================================================
TIMELINE GRID
========================================================= */

.timeline-grid{

position:relative;

display:grid;

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

gap:clamp(20px,3vw,52px);

width:min(1380px,92%);

margin:0 auto;

}

/* =========================================================
ENERGY TRACK
========================================================= */

.timeline-grid::before{

content:"";

position:absolute;

top:42px;

left:6%;

right:6%;

height:1px;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(190,145,63,.3) 8%,
        rgba(211,172,91,.7) 50%,
        rgba(190,145,63,.3) 92%,
        transparent
    );

box-shadow:

    0 0 10px
    rgba(205,160,75,.28),

    0 0 30px
    rgba(205,160,75,.08);

z-index:0;

}

/* =========================================================
MOVING ENERGY BEAM
========================================================= */

.timeline-grid::after{

content:"";

position:absolute;

top:40px;

left:6%;

width:14%;

height:4px;

border-radius:50%;

background:

    radial-gradient(
        ellipse,
        rgba(255,239,183,.95),
        rgba(214,166,75,.55) 35%,
        transparent 75%
    );

filter:blur(1px);

box-shadow:

    0 0 10px
    rgba(236,192,99,.9),

    0 0 25px
    rgba(209,157,61,.5),

    0 0 55px
    rgba(209,157,61,.2);

animation:
    timeline-energy-travel
    7s
    cubic-bezier(.45,0,.25,1)
    infinite;

z-index:2;

pointer-events:none;

}

@keyframes timeline-energy-travel{

0%{

    left:6%;

    opacity:0;

}

8%{

    opacity:1;

}

42%{

    opacity:1;

}

50%{

    left:43%;

}

92%{

    opacity:1;

}

100%{

    left:88%;

    opacity:0;

}

}

/* =========================================================
TIMELINE CARD
========================================================= */

.timeline-card{

position:relative;

z-index:3;

min-height:280px;

padding:
    72px
    clamp(22px,2.4vw,38px)
    34px;

display:flex;

flex-direction:column;

justify-content:flex-start;

overflow:hidden;

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

background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.065),
        rgba(255,255,255,.018)
    );

backdrop-filter:
    blur(20px)
    saturate(120%);

-webkit-backdrop-filter:
    blur(20px)
    saturate(120%);

box-shadow:

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

    0 18px 50px
    rgba(0,0,0,.22);

transition:

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

    border-color .5s ease,

    box-shadow .5s ease,

    background .5s ease;

}

/* =========================================================
TOP ENERGY NODE
========================================================= */

.timeline-card::before{

content:"";

position:absolute;

top:27px;

left:50%;

width:28px;

height:28px;

border-radius:50%;

transform:
    translateX(-50%);

background:

    radial-gradient(
        circle,
        rgba(255,244,196,1) 0 8%,
        rgba(226,183,95,.95) 15%,
        rgba(190,138,48,.42) 35%,
        transparent 70%
    );

border:
    1px solid
    rgba(225,187,108,.65);

box-shadow:

    0 0 8px
    rgba(236,197,111,.9),

    0 0 22px
    rgba(210,160,68,.55),

    0 0 45px
    rgba(210,160,68,.18);

animation:
    timeline-node-pulse
    3.8s
    ease-in-out
    infinite;

z-index:5;

}

@keyframes timeline-node-pulse{

0%,
100%{

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

    opacity:.72;

}

50%{

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

    opacity:1;

}

}

/* =========================================================
NODE INNER LIGHT
========================================================= */

.timeline-card::after{

content:"";

position:absolute;

top:34px;

left:50%;

width:5px;

height:5px;

border-radius:50%;

transform:
    translateX(-50%);

background:#fff8dc;

box-shadow:

    0 0 8px
    rgba(255,246,201,1),

    0 0 18px
    rgba(236,193,100,.95);

z-index:6;

}

/* =========================================================
PHASE LABEL
========================================================= */

.timeline-card > span{

display:inline-block;

margin-bottom:22px;

font-size:10px;

font-weight:700;

letter-spacing:.26em;

color:

    rgba(210,168,88,.88);

text-transform:uppercase;

}

/* =========================================================
CARD TITLE
========================================================= */

.timeline-card h3{

margin:0 0 16px;

font-size:
    clamp(21px,1.7vw,29px);

line-height:1.15;

letter-spacing:-.025em;

color:

    rgba(255,255,255,.94);

}

/* =========================================================
CARD DESCRIPTION
========================================================= */

.timeline-card p{

margin:0;

max-width:340px;

font-size:14px;

line-height:1.8;

color:

    rgba(255,255,255,.56);

}

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

.timeline-card:hover{

transform:
    translateY(-10px);

border-color:

    rgba(214,169,82,.32);

background:

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

box-shadow:

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

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

    0 0 35px
    rgba(201,153,66,.08);

}

.timeline-card:hover::before{

box-shadow:

    0 0 10px
    rgba(255,242,190,1),

    0 0 28px
    rgba(225,178,80,.85),

    0 0 65px
    rgba(225,178,80,.28);

}

/* =========================================================
CARD INTERNAL ENERGY SHEEN
========================================================= */

.timeline-card .timeline-energy-sheen{

position:absolute;

inset:0;

pointer-events:none;

transform:
    translateX(-120%);

background:

    linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,223,148,.06) 48%,
        rgba(255,255,255,.12) 50%,
        rgba(255,223,148,.04) 52%,
        transparent 65%
    );

}

.timeline-card:hover .timeline-energy-sheen{

animation:
    timeline-card-sweep
    1.4s
    ease
    forwards;

}

@keyframes timeline-card-sweep{

to{

    transform:
        translateX(120%);

}

}

/* =========================================================
TIMELINE STATUS
========================================================= */

.timeline-status{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

margin:
    55px auto
    0;

width:min(700px,90%);

}

.timeline-status-line{

flex:1;

height:1px;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(201,155,69,.35),
        transparent
    );

}

.timeline-status-text{

font-size:9px;

font-weight:700;

letter-spacing:.3em;

color:

    rgba(204,164,83,.6);

white-space:nowrap;

}

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

.timeline-card{

opacity:0;

transform:
    translateY(35px);

animation:
    timeline-card-reveal
    .9s
    cubic-bezier(.2,.75,.2,1)
    forwards;

}

.timeline-card:nth-child(1){

animation-delay:.15s;

}

.timeline-card:nth-child(2){

animation-delay:.3s;

}

.timeline-card:nth-child(3){

animation-delay:.45s;

}

.timeline-card:nth-child(4){

animation-delay:.6s;

}

@keyframes timeline-card-reveal{

to{

    opacity:1;

    transform:
        translateY(0);

}

}

/* =========================================================
TABLET
========================================================= */

@media (max-width:1050px){

.timeline-grid{

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

    gap:24px;

}

.timeline-grid::before,
.timeline-grid::after{

    display:none;

}

.timeline-card{

    min-height:260px;

}

}

/* =========================================================
MOBILE — VERTICAL ENERGY TIMELINE
========================================================= */

@media (max-width:680px){

.timeline{

    padding:
        85px
        0
        90px;

}


.timeline .section-header{

    width:90%;

    margin-bottom:65px;

}


.timeline-grid{

    display:flex;

    flex-direction:column;

    gap:24px;

    width:88%;

    padding-left:30px;

}


.timeline-grid::before{

    display:block;

    top:0;

    bottom:0;

    left:8px;

    right:auto;

    width:1px;

    height:auto;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(205,160,73,.6) 10%,
            rgba(205,160,73,.6) 90%,
            transparent
        );

}


.timeline-grid::after{

    display:block;

    top:0;

    left:6px;

    width:5px;

    height:55px;

    animation:
        timeline-energy-vertical
        6s
        ease-in-out
        infinite;

}


@keyframes timeline-energy-vertical{

    0%{

        top:0;

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        top:calc(100% - 55px);

        opacity:0;

    }

}


.timeline-card{

    min-height:auto;

    padding:
        52px
        24px
        28px;

}


.timeline-card::before{

    top:28px;

    left:-30px;

    width:22px;

    height:22px;

}


.timeline-card::after{

    top:36px;

    left:-30px;

}


.timeline-card:hover{

    transform:
        translateY(-5px);

}


.timeline-status{

    margin-top:45px;

}

}

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

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

.timeline-grid::after,
.timeline-card::before{

    animation:none;

}


.timeline-card{

    opacity:1;

    transform:none;

    animation:none;

    transition:none;

}


.timeline-card:hover{

    transform:none;

}

}
/* =========================================================
GALLERY
========================================================= */

.gallery{

position:relative;

}

.gallery-grid{

display:grid;

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

grid-auto-rows:260px;

gap:22px;

}

.gallery-card{

position:relative;

min-height:260px;

padding:0!important;

overflow:hidden;

background:

linear-gradient(
135deg,
rgba(214,168,79,.08),
rgba(21,121,200,.045),
rgba(168,44,34,.045)
);

}

.gallery-card::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at 30% 30%,
rgba(214,168,79,.16),
transparent 35%
),

radial-gradient(
circle at 75% 70%,
rgba(21,121,200,.1),
transparent 40%
);

opacity:.7;

transition:
transform .8s var(--ars-ease),
opacity .5s;

}

.gallery-card::after{

content:"ARS HERITAGE";

position:absolute;

left:24px;
bottom:20px;

color:
rgba(247,244,238,.38);

font-size:.65rem;

letter-spacing:.2em;

}

.gallery-card:hover::before{

transform:scale(1.15);

opacity:1;

}

.gallery-card:hover{

transform:
translateY(-8px);

}

/* =========================================================
STATS
========================================================= */

.stat-card{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

min-height:220px;

text-align:center;

}

.stat-card h3{

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

color:
var(--ars-gold);

margin-bottom:12px;

}

.stat-card span{

color:
var(--ars-silver);

font-size:13px;

letter-spacing:1px;

}

ransparent 68%
    );

filter:
    blur(5px);

animation:
    partnershipCoreBreath
    4s
    ease-in-out
    infinite;

}

/* =========================================================
   ARS HERITAGE GROUP
   PARTNERSHIP NETWORK
   MASTER CSS — V3
   =========================================================
   ARCHITECTURE

   PARTNERSHIP
       │
       ├── AMBIENT FIELD
       │
       ├── HEADER
       │
       └── NETWORK
             │
             ├── ENERGY NETWORK
             │      ├── BRIDGE 01
             │      ├── BRIDGE 02
             │      ├── BRIDGE 03
             │      ├── BRIDGE 04
             │      └── SECONDARY LINKS
             │
             ├── ARS CORE
             │      └── CORE ENERGY
             │
             ├── NODE 01
             ├── NODE 02
             ├── NODE 03
             ├── NODE 04
             │
             └── ORBITAL PARTICLES

   DESIGN RULE:
   ENERGY ORIGIN = ARS CORE
   CARDS DO NOT CREATE THEIR OWN ATMOSPHERIC BACKLIGHT
   ========================================================= */


/* =========================================================
   01 — PARTNERSHIP SECTION
   ========================================================= */

.partnership{

    position:relative;

    width:100%;

    padding:
        clamp(90px,10vw,150px)
        clamp(20px,4vw,60px)
        clamp(80px,9vw,140px);

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 46%,
            rgba(228,185,95,.045),
            transparent 32%
        ),

        radial-gradient(
            circle at 50% 78%,
            rgba(20,45,75,.055),
            transparent 45%
        ),

        #050607;

}


/* =========================================================
   02 — GLOBAL PARTNERSHIP ENERGY FIELD
   ========================================================= */

.partnership-energy-field{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    overflow:hidden;

}


/* Ambient particles */

.partnership-energy-dot{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:
        rgba(228,185,95,.48);

    box-shadow:
        0 0 7px rgba(228,185,95,.38);

    opacity:.45;

    animation:
        partnershipAmbientFloat
        8s ease-in-out
        infinite;

}


/* Individual positions */

.partnership-energy-dot.dot-01{
    left:8%;
    top:18%;
}

.partnership-energy-dot.dot-02{
    left:18%;
    top:42%;
    animation-delay:-2s;
}

.partnership-energy-dot.dot-03{
    left:82%;
    top:16%;
    animation-delay:-4s;
}

.partnership-energy-dot.dot-04{
    left:91%;
    top:38%;
    animation-delay:-1s;
}

.partnership-energy-dot.dot-05{
    left:12%;
    top:72%;
    animation-delay:-5s;
}

.partnership-energy-dot.dot-06{
    left:87%;
    top:70%;
    animation-delay:-3s;
}

.partnership-energy-dot.dot-07{
    left:28%;
    top:28%;
    animation-delay:-6s;
}

.partnership-energy-dot.dot-08{
    left:73%;
    top:30%;
    animation-delay:-2.5s;
}

.partnership-energy-dot.dot-09{
    left:35%;
    top:82%;
    animation-delay:-4.5s;
}

.partnership-energy-dot.dot-10{
    left:67%;
    top:84%;
    animation-delay:-1.5s;
}

.partnership-energy-dot.dot-11{
    left:5%;
    top:52%;
    animation-delay:-7s;
}

.partnership-energy-dot.dot-12{
    left:95%;
    top:57%;
    animation-delay:-3.5s;
}


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

.partnership-header{

    position:relative;

    z-index:5;

    width:min(900px,100%);

    margin:
        0 auto
        clamp(70px,8vw,120px);

    text-align:center;

}


/* =========================================================
   04 — PARTNERSHIP NETWORK MASTER
   ========================================================= */

.partnership-network{

    position:relative;

    width:min(1080px,100%);

    /*
       Enough vertical space for:

       CORE
          ↓
       ROW 01
          ↓
       ROW 02
    */

    min-height:
        clamp(820px,78vw,1080px);

    margin:0 auto;

    isolation:isolate;

}


/* =========================================================
   05 — CENTRAL NETWORK ATMOSPHERE
   ========================================================= */

.partnership-network::before{

    content:"";

    position:absolute;

    left:50%;
    top:37%;

    width:
        clamp(420px,55vw,720px);

    height:
        clamp(420px,55vw,720px);

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

    border-radius:50%;

    pointer-events:none;

    z-index:0;

    background:

        radial-gradient(
            circle,
            rgba(228,185,95,.075) 0%,
            rgba(228,185,95,.035) 28%,
            rgba(184,137,63,.018) 48%,
            transparent 72%
        );

    filter:blur(26px);

    opacity:.9;

}


/* =========================================================
   06 — ENERGY CONNECTION MASTER
   ========================================================= */

.partnership-energy-network{

    position:absolute;

    inset:0;

    z-index:2;

    display:block;

    pointer-events:none;

    overflow:visible;

}


/* =========================================================
   07 — PRIMARY ENERGY BRIDGES
   ========================================================= */

.partnership-energy-bridge{

    position:absolute;

    display:block;

    display: 1px;

    transform-origin:left center;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            rgba(255,248,210,.82),
            rgba(228,185,95,.42),
            rgba(184,137,63,.12),
            transparent
        );

    box-shadow:

        0 0 5px rgba(255,241,184,.55),

        0 0 14px rgba(228,185,95,.32),

        0 0 28px rgba(184,137,63,.12);

    opacity:.78;

}


/* Moving energy pulse */

.partnership-energy-bridge i{

    position:absolute;

    left:0;
    top:50%;

    width:9px;
    height:9px;

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

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,235,1) 0%,
            rgba(255,241,184,.95) 34%,
            rgba(228,185,95,.6) 62%,
            transparent 100%
        );

    box-shadow:

        0 0 6px rgba(255,255,235,.95),

        0 0 15px rgba(255,241,184,.8),

        0 0 30px rgba(228,185,95,.45);

    animation:
        partnershipEnergyTravel
        4.8s
        linear
        infinite;

}


/*
   CORE → NODE 01
*/

.partnership-energy-bridge.bridge-01{

    left:50%;

    top:50%;

    width:25%;

    transform:
        rotate(137deg);

}


/*
   CORE → NODE 02
*/

.partnership-energy-bridge.bridge-02{

    left:50%;

    top:50%;

    width:30%;

    transform:
        rotate(75deg);

}


/*
   CORE → NODE 03
*/

.partnership-energy-bridge.bridge-03{

    left:50%;

    top:50%;

    width:30%;

    transform:
        rotate(43deg);

}


/*
   CORE → NODE 04
*/

.partnership-energy-bridge.bridge-04{

    left:50%;

    top:50%;

    width:30%;

    transform:
        rotate(137deg);

}


/* =========================================================
   08 — SECONDARY ENERGY LINKS
   ========================================================= */

.partnership-energy-link{

    position:absolute;

    height:2px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(228,185,95,.18),
            transparent
        );

    box-shadow:
        0 0 8px rgba(228,185,95,.10);

    opacity:.55;

}


/* Subtle horizontal network connections */

.partnership-energy-link.link-01{

    left:20%;
    top:63%;

    width:60%;

}

.partnership-energy-link.link-02{

    left:26%;
    top:73%;

    width:48%;

}

.partnership-energy-link.link-03{

    left:32%;
    top:84%;

    width:36%;

}

.partnership-energy-link.link-04{

    left:38%;
    top:55%;

    width:24%;

}


/* =========================================================
   09 — CENTRAL ARS PARTNERSHIP CORE
   ========================================================= */

.partnership-core{

    position:absolute;

    left:50%;
    top:7%;

    /*
       Slightly larger than the previous core.
    */

    
        
    width:
    clamp(248px,23vw,312px);

    aspect-ratio:1 / 1;

    transform:
        translateX(-50%);

    z-index:20;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:50%;

    overflow:visible;

    isolation:isolate;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(21,39,64,.95),
            rgba(8,15,28,.97) 66%,
            rgba(4,8,15,.98) 100%
        );

    border:
        1px solid
        rgba(228,185,95,.28);

    box-shadow:

        inset 0 0 40px
        rgba(228,185,95,.035),

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

        0 0 30px
        rgba(228,185,95,.08),

        0 0 80px
        rgba(184,137,63,.07);

}


/* =========================================================
   10 — CORE OUTER ENERGY
   ========================================================= */

.partnership-core::before{

    content:"";

    position:absolute;

    inset:-20px;

    z-index:-1;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(228,185,95,.16) 0%,
            rgba(228,185,95,.07) 28%,
            rgba(184,137,63,.025) 50%,
            transparent 72%
        );

    filter:blur(20px);

    opacity:.85;

}


/* =========================================================
   11 — CORE ENERGY SYSTEM
   ========================================================= */

.partnership-core-energy{

    position:absolute;

    inset:-1px;

    z-index:1;

    pointer-events:none;

}


/* Orbit rings */

.partnership-core-orbit{

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    border:
        1px
        dashed
        rgba(228,185,95,.16);

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

}


/* Outer orbit */

.partnership-core-orbit.orbit-outer{

    width:88%;
    height:88%;

    animation:
        coreOrbitRotate
        24s
        linear
        infinite;

}


/* Middle orbit */

.partnership-core-orbit.orbit-middle{

    width:73%;
    height:73%;

    border-color:
        rgba(228,185,95,.12);

    animation:
        coreOrbitRotateReverse
        18s
        linear
        infinite;

}


/* Inner orbit */

.partnership-core-orbit.orbit-inner{

    width:58%;
    height:58%;

    border-color:
        rgba(228,185,95,.085);

}


/* =========================================================
   12 — CORE HALO
   ========================================================= */

.partnership-core-halo{

    position:absolute;

    left:50%;
    top:50%;

    width:48%;
    height:48%;

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

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(228,185,95,.13),
            rgba(184,137,63,.045) 42%,
            transparent 72%
        );

    filter:blur(18px);

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

}


/* =========================================================
   13 — CORE LIGHT
   ========================================================= */

.partnership-core-light{

    position:absolute;

    left:50%;
    top:50%;

    width:22px;
    height:22px;

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

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,240,1) 0%,
            rgba(255,241,184,.95) 28%,
            rgba(228,185,95,.62) 58%,
            transparent 100%
        );

    box-shadow:

        0 0 8px
        rgba(255,255,240,1),

        0 0 22px
        rgba(255,241,184,.92),

        0 0 42px
        rgba(228,185,95,.62),

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

    opacity:.9;

}


/* =========================================================
   14 — CORE CONTENT
   ========================================================= */

.partnership-core-label{

    position:relative;

    z-index:10;

    margin-bottom:8px;

    color:
        rgba(228,185,95,.82);

    font-size:
        clamp(9px,.72vw,12px);

    line-height:1.5;

    letter-spacing:
        .42em;

    text-transform:uppercase;

}


.partnership-core h3{

    position:relative;

    z-index:10;

    margin:
        0 0 8px;

    color:
        rgba(255,252,244,.96);

    font-size:
        clamp(42px,4vw,60px);

    line-height:.95;

    font-weight:600;

    letter-spacing:
        .10em;

}


.partnership-core-title{

    position:relative;

    z-index:10;

    color:
        rgba(228,185,95,.82);

    font-size:
        clamp(10px,.8vw,13px);

    letter-spacing:
        .36em;

}


.partnership-core-subtitle{

    position:relative;

    z-index:10;

    margin-top:12px;

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

    font-size:
        clamp(8px,.65vw,11px);

    letter-spacing:
        .30em;

}


/* =========================================================
   15 — PARTNERSHIP NODES GRID
   ========================================================= */

.partnership-node{

    position:absolute;

    /*
       Cards deliberately much smaller than Core.
    */

    width:
        clamp(245px,24vw,300px);

    min-height:
        clamp(190px,18vw,225px);

    padding:
        24px 26px;

    z-index:15;

    overflow:visible;

    border-radius:22px;

    background:

        linear-gradient(
            145deg,
            rgba(19,35,57,.32),
            rgba(7,14,26,.72)
        );

    border:
        1px solid
        rgba(228,185,95,.17);

    box-shadow:

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

        0 18px 50px
        rgba(0,0,0,.28);

}


/*
   IMPORTANT:
   No card pseudo-element atmospheric glow.
   Energy belongs to the network.
*/

.partnership-node::before,
.partnership-node::after{

    content:none;

}


/* =========================================================
   16 — NODE POSITIONS
   TRUE 2 × 2 SYSTEM
   ========================================================= */


/* TOP LEFT */

.partnership-node-01{

    left:4%;

    top:43%;

}


/* TOP RIGHT */

.partnership-node-02{

    right:4%;

    top:43%;

}


/* BOTTOM LEFT */

.partnership-node-03{

    left:4%;

    top:69%;

}


/* BOTTOM RIGHT */

.partnership-node-04{

    right:4%;

    top:69%;

}


/* =========================================================
   17 — NODE ENERGY MICRO CORE
   ========================================================= */

.partnership-node-energy{

    position:absolute;

    top:20px;
    right:20px;

    width:52px;
    height:52px;

    z-index:20;

    pointer-events:none;

}


/* Rings */

.node-energy-ring{

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

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

    border:
        1px solid
        rgba(228,185,95,.25);

}


.node-energy-ring.ring-outer{

    width:100%;
    height:100%;

    border-color:
        rgba(228,185,95,.18);

}


.node-energy-ring.ring-inner{

    width:68%;
    height:68%;

    border-style:dashed;

    border-color:
        rgba(228,185,95,.16);

}


/* Micro core */

.node-energy-core{

    position:absolute;

    left:50%;
    top:50%;

    width:10px;
    height:10px;

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

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,240,1),
            rgba(255,241,184,.85) 35%,
            rgba(228,185,95,.45) 62%,
            transparent 100%
        );

    box-shadow:

        0 0 6px
        rgba(255,255,240,.9),

        0 0 14px
        rgba(255,241,184,.65),

        0 0 26px
        rgba(228,185,95,.32);

}


/* =========================================================
   18 — NODE CONTENT
   ========================================================= */

.partnership-node-content{

    position:relative;

    z-index:10;

    padding-right:34px;

}


.partnership-node-index{

    display:block;

    margin-bottom:12px;

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

    font-size:11px;

    letter-spacing:.28em;

}


.partnership-node-category{

    display:block;

    margin-bottom:9px;

    color:
        rgba(228,185,95,.78);

    font-size:10px;

    letter-spacing:.32em;

}


.partnership-node h3{

    margin:
        0 0 12px;

    max-width:
        88%;

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

    font-size:
        clamp(20px,1.8vw,26px);

    line-height:1.15;

    font-weight:600;

}


.partnership-node p{

    margin:0;

    max-width:
        92%;

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

    font-size:
        clamp(12px,.9vw,14px);

    line-height:1.75;

}


/* =========================================================
   19 — NODE STATUS
   ========================================================= */

.partnership-node-status{

    position:absolute;

    left:26px;
    bottom:20px;

    color:
        rgba(228,185,95,.42);

    font-size:8px;

    letter-spacing:.28em;

}


/* =========================================================
   20 — ORBITAL DATA PARTICLES
   ========================================================= */

.partnership-orbital-particles{

    position:absolute;

    inset:0;

    z-index:5;

    pointer-events:none;

}


.partnership-particle{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:
        rgba(228,185,95,.55);

    box-shadow:
        0 0 8px rgba(228,185,95,.38);

    animation:
        partnershipParticleDrift
        7s
        ease-in-out
        infinite;

}


.partnership-particle.particle-01{
    left:13%;
    top:38%;
}

.partnership-particle.particle-02{
    left:87%;
    top:40%;
    animation-delay:-1s;
}

.partnership-particle.particle-03{
    left:22%;
    top:62%;
    animation-delay:-2s;
}

.partnership-particle.particle-04{
    left:78%;
    top:62%;
    animation-delay:-3s;
}

.partnership-particle.particle-05{
    left:31%;
    top:87%;
    animation-delay:-4s;
}

.partnership-particle.particle-06{
    left:69%;
    top:87%;
    animation-delay:-5s;
}

.partnership-particle.particle-07{
    left:50%;
    top:31%;
    animation-delay:-2.5s;
}

.partnership-particle.particle-08{
    left:50%;
    top:92%;
    animation-delay:-6s;
}


/* =========================================================
   21 — NODE HOVER
   ========================================================= */

@media (hover:hover){

    .partnership-node{

        transition:
            transform .45s cubic-bezier(.16,1,.3,1),
            border-color .45s ease,
            box-shadow .45s ease;

    }


    .partnership-node:hover{

        transform:
            translateY(-5px);

        border-color:
            rgba(228,185,95,.30);

        box-shadow:

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

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

            0 0 28px
            rgba(228,185,95,.06);

    }

}


/* =========================================================
   22 — PARTNERSHIP PHILOSOPHY
   ========================================================= */

.partnership-philosophy{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:
        18px;

    width:min(1000px,100%);

    margin:
        50px auto 0;

    color:
        rgba(228,185,95,.55);

}


.partnership-philosophy-line{

    width:
        clamp(40px,10vw,120px);

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(228,185,95,.35),
            transparent
        );

}


.partnership-philosophy-text{

    font-size:
        clamp(8px,.65vw,10px);

    letter-spacing:
        .30em;

}


.partnership-philosophy-divider{

    color:
        rgba(228,185,95,.30);

}


/* =========================================================
   23 — FINAL ENERGY CONNECTION
   ========================================================= */

.partnership-final-energy{

    position:relative;

    width:min(700px,100%);

    height:90px;

    margin:
        45px auto 0;

    display:flex;

    align-items:center;

    justify-content:center;

}


.final-energy-line{

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(228,185,95,.12),
            rgba(228,185,95,.38),
            rgba(228,185,95,.12),
            transparent
        );

}


.final-energy-core{

    position:relative;

    width:8px;
    height:8px;

    border-radius:50%;

    background:
        rgba(255,241,184,.95);

    box-shadow:

        0 0 7px
        rgba(255,255,240,.9),

        0 0 18px
        rgba(255,241,184,.65),

        0 0 34px
        rgba(228,185,95,.38);

}


.final-energy-pulse{

    position:absolute;

    width:28px;
    height:28px;

    border-radius:50%;

    border:
        1px solid
        rgba(228,185,95,.22);

    animation:
        finalEnergyPulse
        3.5s
        ease-out
        infinite;

}


/* =========================================================
   24 — DESKTOP LARGE
   ========================================================= */

@media (min-width:1101px){

    .partnership-node{

        width:300px;

    }

}


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

@media (max-width:900px){

    .partnership{

        padding-left:20px;
        padding-right:20px;

    }


    .partnership-network{

        min-height:
            980px;

    }


    .partnership-core{

        width:
            clamp(285px,42vw,340px);

        top:6%;

    }


    .partnership-node{

        width:
            clamp(225px,32vw,280px);

        min-height:
            205px;

        padding:
            22px 22px;

    }


    .partnership-node-01,
    .partnership-node-03{

        left:0;

    }


    .partnership-node-02,
    .partnership-node-04{

        right:0;

    }


    .partnership-node-01,
    .partnership-node-02{

        top:39%;

    }


    .partnership-node-03,
    .partnership-node-04{

        top:67%;

    }

}


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

@media (max-width:650px){

    .partnership{

        padding:
            75px 16px
            70px;

    }


    .partnership-header{

        margin-bottom:55px;

    }


    .partnership-network{

        min-height:
            1120px;

    }


    .partnership-core{

        top:2%;

        width:
            min(300px,78vw);

    }


    /*
       On mobile the two-column architecture
       becomes a controlled single column.
    */

    .partnership-node{

        left:50% !important;
        right:auto !important;

        width:
            min(300px,88vw);

        min-height:
            190px;

        transform:
            translateX(-50%);

    }


    .partnership-node-01{

        top:34%;

    }


    .partnership-node-02{

        top:51%;

    }


    .partnership-node-03{

        top:68%;

    }


    .partnership-node-04{

        top:85%;

    }


    .partnership-energy-bridge{

        opacity:.45;

    }


    .partnership-energy-link{

        opacity:.25;

    }


    .partnership-node-content{

        padding-right:24px;

    }


    .partnership-node h3{

        font-size:20px;

    }


    .partnership-node p{

        font-size:12px;

        line-height:1.7;

    }


    .partnership-philosophy{

        gap:10px;

    }


    .partnership-philosophy-line{

        width:35px;

    }

}


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

@media (max-width:390px){

    .partnership-core{

        width:
            270px;

    }


    .partnership-network{

        min-height:
            1060px;

    }


    .partnership-node{

        width:
            92vw;

    }

}


/* =========================================================
   28 — ENERGY ANIMATIONS
   ========================================================= */

@keyframes partnershipEnergyTravel{

    0%{

        left:0;

        opacity:.1;

    }

    15%{

        opacity:1;

    }

    75%{

        opacity:.85;

    }

    100%{

        left:100%;

        opacity:0;

    }

}


@keyframes coreOrbitRotate{

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

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

}


@keyframes coreOrbitRotateReverse{

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

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

}


@keyframes coreHaloPulse{

    0%,100%{

        opacity:.45;

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

    }

    50%{

        opacity:.85;

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

    }

}


@keyframes partnershipAmbientFloat{

    0%,100%{

        opacity:.25;

        transform:
            translate3d(0,0,0);

    }

    50%{

        opacity:.75;

        transform:
            translate3d(0,-10px,0);

    }

}


@keyframes partnershipParticleDrift{

    0%,100%{

        opacity:.2;

        transform:
            translate3d(0,0,0)
            scale(.8);

    }

    50%{

        opacity:.75;

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

    }

}


@keyframes finalEnergyPulse{

    0%{

        opacity:.7;

        transform:
            scale(.45);

    }

    70%{

        opacity:.12;

        transform:
            scale(1.5);

    }

    100%{

        opacity:0;

        transform:
            scale(1.8);

    }

}


/* =========================================================
   29 — ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

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

    .partnership-energy-dot,
    .partnership-energy-bridge i,
    .partnership-core-orbit,
    .partnership-core-halo,
    .partnership-particle,
    .final-energy-pulse{

        animation:none !important;

    }


    .partnership-node{

        transition:none !important;

    }

}


/* =========================================================
CONTACT CTA
========================================================= */

.contact-cta{

position:relative;

text-align:center;

padding-top:
180px;

padding-bottom:
180px;

background:

radial-gradient(
circle at center,
rgba(214,168,79,.13),
transparent 45%
);

overflow:hidden;

}

.contact-cta::before{

content:"";

position:absolute;

width:700px;
height:700px;

top:50%;
left:50%;

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

border-radius:50%;

background:

radial-gradient(
circle,
rgba(214,168,79,.1),
rgba(21,121,200,.035) 35%,
transparent 70%
);

filter:blur(35px);

pointer-events:none;

}

.contact-cta .section-header{

position:relative;

z-index:2;

margin-bottom:0;

}

/* =========================================================
FOOTER
========================================================= */

.ars-footer{

position:relative;

padding:
80px
6vw
30px;

border-top:
1px solid
rgba(255,255,255,.08);

background:#030405;

overflow:hidden;

}

.ars-footer::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:1px;

background:

linear-gradient(
90deg,
transparent,
var(--ars-gold),
rgba(21,121,200,.5),
transparent
);

opacity:.6;

}

.footer-top{

max-width:1250px;

margin:auto;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-brand img{

width:90px;

margin-bottom:20px;

filter:
drop-shadow(
0 0 15px
rgba(214,168,79,.25)
);

}

.footer-brand h3{

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

margin-bottom:12px;

}

.footer-brand p{

color:
rgba(247,244,238,.55);

line-height:1.8;

}

.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links h4{

color:
var(--ars-gold);

margin-bottom:8px;

}

.footer-links a{

color:
rgba(247,244,238,.55);

transition:
color .3s;

}

.footer-links a:hover{

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

}

.footer-bottom{

max-width:1250px;

margin:
60px
auto
0;

padding-top:25px;

border-top:
1px solid
rgba(255,255,255,.07);

display:flex;

justify-content:space-between;

align-items:center;

color:
rgba(247,244,238,.4);

font-size:.8rem;

}

/* =========================================================
RESPONSIVE — 1100px
========================================================= */

@media(max-width:1100px){

.hero-ecosystem-node{

width:150px;

}

.node-brain{
left:2%;
}

.node-design{
left:1%;
}

.node-rose{
left:3%;
}

.node-naji{
right:2%;
}

.node-company{
right:1%;
}

.node-engineering{
right:3%;
}

.country-grid{

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

}

.partners-grid{

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

}

.partnership-grid{

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

}

.footer-top{

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

}

}

/* =========================================================
RESPONSIVE — 800px
========================================================= */

@media(max-width:800px){

.ars-group-page section{

padding:
100px
30px;

}

.group-hero{

padding-top:100px;

}

.hero-ecosystem-nodes{

position:relative;

inset:auto;

display:grid;

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

gap:12px;

width:100%;

max-width:500px;

margin-top:50px;

}

.hero-ecosystem-node{

position:relative;

top:auto;
left:auto;
right:auto;
bottom:auto;

width:100%;

animation:none;

}

.hero-energy-orbits{

width:500px;
height:500px;

}

.who-grid,
.leadership-grid{

grid-template-columns:1fr;

}

.mission-grid,
.values-grid,
.dna-grid,
.future-grid,
.standards-grid{

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

}

.timeline-grid,
.stats-grid{

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

}

.vision-grid{

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

}

.ecosystem-wrapper{

min-height:auto;

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

padding:
30px
0;

}

.ecosystem-center{

position:relative;

top:auto;
left:auto;

transform:none;

margin-bottom:20px;

}

.eco{

position:relative;

top:auto;
left:auto;
right:auto;
bottom:auto;

width:100%;

max-width:360px;

}

.eco-9{

transform:none;

}

.eco-9:hover{

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

}

.ecosystem-wrapper::before,
.ecosystem-wrapper::after{

display:none;

}

.gallery-grid{

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

}

.footer-bottom{

flex-direction:column;

gap:15px;

text-align:center;

}

}

/* =========================================================
RESPONSIVE — 560px
========================================================= */

@media(max-width:560px){

.ars-group-page section{

padding:
90px
20px;

}

.group-hero{

padding-left:20px;
padding-right:20px;

}

.group-hero h1{

font-size:
clamp(
2.7rem,
14vw,
4.5rem
);

}

.group-buttons{

flex-direction:column;

width:100%;

max-width:320px;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.group-logo-wrapper{

width:180px;
height:180px;

}

.hero-ecosystem-nodes{

grid-template-columns:1fr;

}

.hero-energy-orbits{

width:360px;
height:360px;

}

.hero-energy-core{

width:150px;
height:150px;

}

.mission-grid,
.values-grid,
.vision-grid,
.dna-grid,
.future-grid,
.standards-grid,
.timeline-grid,
.country-grid,
.stats-grid{

grid-template-columns:1fr;

}

.partners-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:220px;

}

.gallery-card{

min-height:220px;

}

.partnership-grid{

grid-template-columns:1fr;

}

.partner-card{

min-height:130px;

}

.partnership-grid .partner-card{

min-height:200px;

}

.leader-photo{

height:220px;

width:220px;

}

.footer-top{

grid-template-columns:1fr;

}

}

/* =========================================================
ACCESSIBILITY
========================================================= */

button,
a{

-webkit-tap-highlight-color:transparent;

}

a:focus-visible{

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

outline-offset:5px;

}

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

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

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

animation-duration:
.01ms!important;

animation-iteration-count:
1!important;

transition-duration:
.01ms!important;

scroll-behavior:
auto!important;

}

.ecosystem-wrapper::after{

animation:none;

}

}

/* =========================================================
   ARS HERITAGE GROUP
   HERO — NODE & ORBIT SYSTEM
   FINAL FIX
   ========================================================= */

/* =========================================================
   HERO BASE
   ========================================================= */

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

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

    padding:140px 40px 180px;

    text-align:center;
}


/* =========================================================
   INDUSTRIAL GRID
   ========================================================= */

.hero-industrial-grid{
    position:absolute;
    inset:0;
    z-index:-8;
    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(184,137,63,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184,137,63,.055) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.75) 45%,
            transparent 85%
        );

    animation:
        grid-drift 24s linear infinite;
}

@keyframes grid-drift{

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

    to{
        transform:translate3d(70px,70px,0);
    }

}


/* =========================================================
   ENERGY CORE
   ========================================================= */

.hero-energy-core{
    position:absolute;

    left:50%;
    top:50%;

    width:260px;
    height:260px;

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

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,225,150,.95) 0%,
            rgba(207,154,65,.72) 8%,
            rgba(184,137,63,.32) 24%,
            rgba(184,137,63,.12) 42%,
            transparent 72%
        );

    filter:blur(1px);

    animation:
        energy-core-pulse
        4s ease-in-out infinite;
}

.hero-energy-core::before{
    content:"";

    position:absolute;
    inset:22%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,240,190,.95),
            rgba(184,137,63,.45) 45%,
            transparent 75%
        );

    filter:blur(8px);

    animation:
        core-inner-pulse
        2.8s ease-in-out infinite;
}

.hero-energy-core::after{
    content:"";

    position:absolute;

    inset:-40px;

    border-radius:50%;

    border:
        1px solid
        rgba(210,170,90,.25);

    box-shadow:
        0 0 40px rgba(184,137,63,.18),
        0 0 90px rgba(184,137,63,.12);

    animation:
        core-ring-pulse
        5s ease-in-out infinite;
}

@keyframes energy-core-pulse{

    0%,
    100%{
        opacity:.55;
        transform:
            translate(-50%,-50%)
            scale(.88);
    }

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.08);
    }

}

@keyframes core-inner-pulse{

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

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

}

@keyframes core-ring-pulse{

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

    50%{
        opacity:.7;
        transform:scale(1.08);
    }

}


/* =========================================================
   ORBITAL SYSTEM
   IMPORTANT:
   ORBITS ARE CENTERED ON HERO CORE
   ========================================================= */

.hero-energy-orbits{
    position:absolute;

    left:50%;
    top:50%;

    width:1px;
    height:1px;

    z-index:-3;

    pointer-events:none;
}


/* =========================================================
   COMMON ORBIT
   ========================================================= */

.energy-orbit{
    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    border:
        1px solid
        rgba(202,158,76,.34);

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

    transform-origin:center;

    pointer-events:none;

    box-shadow:
        0 0 14px rgba(184,137,63,.08),
        inset 0 0 14px rgba(184,137,63,.04);

    will-change:transform;

    animation-timing-function:linear;
    animation-iteration-count:infinite;
}


/* =========================================================
   ORBIT A
   ========================================================= */

.energy-orbit.orbit-a{

    width:420px;
    height:150px;

    border-color:
        rgba(221,180,94,.48);

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

    animation:
        orbit-a-spin
        18s
        linear
        infinite;
}

@keyframes orbit-a-spin{

    from{
        transform:
            translate(-50%,-50%)
            rotate(18deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(378deg);
    }

}


/* =========================================================
   ORBIT B
   ========================================================= */

.energy-orbit.orbit-b{

    width:570px;
    height:210px;

    border-color:
        rgba(184,137,63,.30);

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

    animation:
        orbit-b-spin
        26s
        linear
        infinite;
}

@keyframes orbit-b-spin{

    from{
        transform:
            translate(-50%,-50%)
            rotate(-32deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(-392deg);
    }

}


/* =========================================================
   ORBIT C
   ========================================================= */

.energy-orbit.orbit-c{

    width:730px;
    height:285px;

    border-color:
        rgba(184,137,63,.18);

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

    animation:
        orbit-c-spin
        38s
        linear
        infinite;
}

@keyframes orbit-c-spin{

    from{
        transform:
            translate(-50%,-50%)
            rotate(62deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(422deg);
    }

}


/* =========================================================
   ORBIT ENERGY DOTS
   ========================================================= */

.energy-orbit::before,
.energy-orbit::after{

    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,235,170,1),
            rgba(184,137,63,.85) 45%,
            transparent 75%
        );

    box-shadow:
        0 0 8px rgba(224,181,94,.9),
        0 0 20px rgba(184,137,63,.55);

}

.energy-orbit::before{

    left:8%;
    top:50%;

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

.energy-orbit::after{

    right:8%;
    top:50%;

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


/* =========================================================
   ENERGY LINES
   ========================================================= */

.hero-energy-lines{
    position:absolute;
    inset:0;

    z-index:-2;

    pointer-events:none;
}

.energy-line{
    position:absolute;

    display:block;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.0),
            rgba(232,197,117,.75),
            rgba(184,137,63,.0),
            transparent
        );

    opacity:.35;

    filter:
        drop-shadow(
            0 0 6px
            rgba(184,137,63,.35)
        );

    transform-origin:center;

    animation:
        energy-line-flow
        7s
        ease-in-out
        infinite;
}

.line-1{
    width:38%;
    left:4%;
    top:31%;
    transform:rotate(18deg);
}

.line-2{
    width:34%;
    right:5%;
    top:35%;
    transform:rotate(-20deg);
    animation-delay:-1s;
}

.line-3{
    width:42%;
    left:2%;
    top:63%;
    transform:rotate(-12deg);
    animation-delay:-2s;
}

.line-4{
    width:40%;
    right:2%;
    top:67%;
    transform:rotate(12deg);
    animation-delay:-3s;
}

.line-5{
    width:28%;
    left:36%;
    top:16%;
    transform:rotate(90deg);
    animation-delay:-4s;
}

.line-6{
    width:28%;
    left:36%;
    bottom:13%;
    transform:rotate(90deg);
    animation-delay:-5s;
}

@keyframes energy-line-flow{

    0%,
    100%{
        opacity:.12;
        transform:
            scaleX(.75)
            rotate(var(--line-angle,0deg));
    }

    50%{
        opacity:.7;
        transform:
            scaleX(1.08)
            rotate(var(--line-angle,0deg));
    }

}


/* =========================================================
   CONNECTION LINES
   ========================================================= */

.hero-connection-lines{
    position:absolute;
    inset:0;

    z-index:0;

    pointer-events:none;
}

.hero-connection-line{

    position:absolute;

    display:block;

    height:1px;

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.65),
            rgba(226,190,108,.3),
            transparent
        );

    opacity:.38;

    filter:
        drop-shadow(
            0 0 5px
            rgba(184,137,63,.25)
        );

    animation:
        connection-pulse
        4s
        ease-in-out
        infinite;
}

.hero-connection-line:nth-child(2){
    animation-delay:-1s;
}

.hero-connection-line:nth-child(3){
    animation-delay:-2s;
}

.hero-connection-line:nth-child(4){
    animation-delay:-3s;
}

@keyframes connection-pulse{

    0%,
    100%{
        opacity:.12;
    }

    50%{
        opacity:.65;
    }

}


/* =========================================================
   HERO CONTENT LAYER
   ========================================================= */

.group-logo-wrapper,
.group-overline,
.group-hero h1,
.group-hero h2,
.group-hero p,
.group-buttons{

    position:relative;

    z-index:5;
}


/* =========================================================
   LOGO
   ========================================================= */

.group-logo-wrapper{

    width:
        clamp(100px,9vw,150px);

    height:
        clamp(100px,9vw,150px);

    display:flex;

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

    margin-bottom:22px;

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

    animation:
        logo-float
        5s
        ease-in-out
        infinite;
}

.group-logo{

    width:100%;
    height:100%;

    object-fit:contain;
}

@keyframes logo-float{

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

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

}


/* =========================================================
   SIX HERO NODES
   ========================================================= */

.hero-ecosystem-nodes{

    position:absolute;

    inset:0;

    z-index:6;

    pointer-events:none;
}


/* =========================================================
   NODE BASE
   ========================================================= */

.hero-ecosystem-node{

    position:absolute;

    width:
        clamp(155px,12vw,220px);

    min-height:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:14px 18px;

    text-decoration:none;

    color:inherit;

    pointer-events:auto;

    border:
        1px solid
        rgba(184,137,63,.32);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(20,20,20,.28)
        );

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.24),
        0 0 25px rgba(184,137,63,.06);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        opacity .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;

    animation:
        node-float
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   NODE HOVER
   ========================================================= */

.hero-ecosystem-node:hover{

    z-index:20;

    border-color:
        rgba(225,190,105,.8);

    background:
        linear-gradient(
            145deg,
            rgba(184,137,63,.16),
            rgba(20,20,20,.42)
        );

    box-shadow:
        0 15px 50px rgba(0,0,0,.35),
        0 0 28px rgba(184,137,63,.28),
        inset 0 0 20px rgba(184,137,63,.06);

    animation-play-state:paused;
}


/* =========================================================
   NODE CONTENT
   ========================================================= */

.node-icon{

    font-size:9px;

    letter-spacing:
        .18em;

    color:
        rgba(221,180,94,.75);
}

.node-name{

    font-size:
        clamp(14px,1.1vw,18px);

    font-weight:600;

    letter-spacing:
        .04em;

    color:
        rgba(255,255,255,.92);
}

.node-line{

    font-size:
        clamp(9px,.7vw,11px);

    line-height:1.4;

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


/* =========================================================
   NODE FLOAT
   ========================================================= */

@keyframes node-float{

    0%,
    100%{
        margin-top:0;
    }

    50%{
        margin-top:-9px;
    }

}


/* =========================================================
   NODE POSITIONS
   IMPORTANT:
   SIX NODES AROUND HERO CORE
   ========================================================= */

.node-brain{

    left:
        clamp(4%,8vw,11%);

    top:31%;

    animation-delay:
        0s;
}

.node-design{

    right:
        clamp(4%,8vw,11%);

    top:31%;

    animation-delay:
        -1s;
}

.node-rose{

    left:
        clamp(2%,5vw,7%);

    top:61%;

    animation-delay:
        -2s;
}

.node-naji{

    right:
        clamp(2%,5vw,7%);

    top:61%;

    animation-delay:
        -3s;
}

.node-company{

    left:
        50%;

    bottom:7%;

    transform:
        translateX(-50%);

    animation-delay:
        -4s;
}

.node-engineering{

    left:
        50%;

    top:13%;

    transform:
        translateX(-50%);

    animation-delay:
        -5s;
}


/* =========================================================
   FIX HOVER TRANSFORM FOR CENTER NODES
   ========================================================= */

.node-company:hover,
.node-engineering:hover{

    transform:
        translateX(-50%)
        translateY(-4px);
}


/* =========================================================
   HERO TEXT SPACING
   ========================================================= */

.group-overline{

    display:block;

    margin-bottom:12px;

    font-size:
        clamp(10px,1vw,13px);

    letter-spacing:
        .3em;

    color:
        rgba(221,180,94,.78);
}

.group-hero h1{

    margin:
        0 0 12px;

    font-size:
        clamp(42px,7vw,100px);

    line-height:.95;

    letter-spacing:
        .04em;

    position:relative;
}

.group-hero h2{

    margin:
        0 0 20px;

    font-size:
        clamp(16px,2vw,28px);

    font-weight:400;

    color:
        rgba(255,255,255,.75);
}

.group-hero p{

    max-width:
        720px;

    margin:
        0 auto 32px;

    font-size:
        clamp(13px,1.2vw,17px);

    line-height:1.8;

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


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .group-hero{

        min-height:
            100svh;

        padding:
            120px 20px 240px;

    }

    .hero-energy-orbits{

        transform:
            scale(.72);

    }

    .hero-ecosystem-node{

        width:
            145px;

        min-height:
            78px;

        padding:
            10px 12px;

    }

    .node-brain{
        left:2%;
        top:28%;
    }

    .node-design{
        right:2%;
        top:28%;
    }

    .node-rose{
        left:2%;
        top:57%;
    }

    .node-naji{
        right:2%;
        top:57%;
    }

    .node-engineering{
        top:9%;
    }

    .node-company{
        bottom:4%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:600px){

    .group-hero{

        padding:
            110px 15px 210px;

    }

    .hero-energy-orbits{

        transform:
            scale(.52);

    }

    .hero-energy-core{

        width:190px;
        height:190px;

    }

    .hero-ecosystem-node{

        width:
            118px;

        min-height:
            64px;

        padding:
            8px 7px;

        border-radius:
            12px;

    }

    .node-icon{

        font-size:7px;

    }

    .node-name{

        font-size:11px;

    }

    .node-line{

        font-size:7px;

    }

    .node-brain{
        left:1%;
        top:28%;
    }

    .node-design{
        right:1%;
        top:28%;
    }

    .node-rose{
        left:1%;
        top:54%;
    }

    .node-naji{
        right:1%;
        top:54%;
    }

    .node-engineering{
        top:7%;
    }

    .node-company{
        bottom:3%;
    }

    .hero-connection-lines,
    .hero-energy-lines{

        opacity:.5;

    }

}


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

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

    .hero-industrial-grid,
    .hero-energy-core,
    .hero-energy-core::before,
    .hero-energy-core::after,
    .energy-orbit,
    .energy-line,
    .hero-connection-line,
    .group-logo-wrapper,
    .hero-ecosystem-node{

        animation:none !important;

    }

}

/* =========================================================
   ARS HERITAGE GROUP
   FINAL 9-NODE ORBITAL ECOSYSTEM
   CENTER CORE + ORBIT RINGS + ENERGY CONNECTIONS
   ========================================================= */

.ecosystem{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

/* =========================================================
   ECOSYSTEM ATMOSPHERE
   ========================================================= */

.ecosystem::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:-5;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(215,170,70,.12),
            transparent 22%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(20,80,120,.06),
            transparent 48%
        );
}

/* =========================================================
   ORBITAL WRAPPER
   ========================================================= */

.ecosystem-wrapper{
    position:relative;

    width:min(1100px,94vw);
    height:780px;

    margin:80px auto 0;

    perspective:1200px;
    isolation:isolate;
}

/* =========================================================
   LARGE ORBIT RINGS
   ========================================================= */

.ecosystem-wrapper::before,
.ecosystem-wrapper::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    pointer-events:none;

    z-index:0;
}

.ecosystem-wrapper::before{
    width:860px;
    height:440px;

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

    border:
        1px solid
        rgba(215,170,70,.28);

    box-shadow:
        0 0 35px
        rgba(215,170,70,.08),

        inset 0 0 45px
        rgba(215,170,70,.035);

    animation:
        arsEcoOrbitA
        26s
        linear
        infinite;
}

.ecosystem-wrapper::after{
    width:680px;
    height:350px;

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

    border:
        1px solid
        rgba(215,170,70,.18);

    box-shadow:
        0 0 30px
        rgba(215,170,70,.05);

    animation:
        arsEcoOrbitB
        20s
        linear
        infinite reverse;
}

/* =========================================================
   ENERGY CONNECTION SYSTEM
   ========================================================= */

.ecosystem-center{
    position:absolute;

    left:50%;
    top:50%;

    width:220px;
    height:220px;

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

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

    text-align:center;

    border-radius:50%;

    z-index:20;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(230,185,80,.34),
            rgba(30,30,30,.96) 48%,
            rgba(10,11,14,.98) 72%
        );

    border:
        1px solid
        rgba(224,180,83,.72);

    box-shadow:
        0 0 30px
        rgba(215,170,70,.30),

        0 0 90px
        rgba(215,170,70,.14),

        inset 0 0 45px
        rgba(215,170,70,.15);

    animation:
        arsEcoCorePulse
        4s
        ease-in-out
        infinite;
}

/* =========================================================
   CORE OUTER ENERGY RING
   ========================================================= */

.ecosystem-center::before{
    content:"";

    position:absolute;

    inset:-16px;

    border-radius:50%;

    border:
        1px solid
        rgba(215,170,70,.32);

    box-shadow:
        0 0 20px
        rgba(215,170,70,.10);

    animation:
        arsEcoCoreRing
        8s
        linear
        infinite;
}

.ecosystem-center::after{
    content:"";

    position:absolute;

    inset:-42px;

    border-radius:50%;

    border:
        1px solid
        rgba(215,170,70,.10);

    animation:
        arsEcoCoreOuterRing
        12s
        linear
        infinite reverse;
}

.ecosystem-center h3{
    position:relative;
    z-index:2;

    margin:0;

    font-size:1.12rem;
    line-height:1.55;

    letter-spacing:.16em;

    color:#f1d38b;

    text-shadow:
        0 0 15px
        rgba(215,170,70,.45);
}

/* =========================================================
   ENERGY LINES FROM CENTER
   ========================================================= */

.ecosystem-wrapper .eco{
    position:absolute;

    width:190px;
    min-height:115px;

    padding:22px 18px;

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

    text-align:center;

    z-index:15;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(35,36,40,.96),
            rgba(12,13,16,.96)
        );

    border:
        1px solid
        rgba(201,157,67,.42);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.48),

        0 0 25px
        rgba(201,157,67,.08);

    backdrop-filter:
        blur(16px);

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

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .4s ease,
        opacity .4s ease;

    animation:
        arsEcoNodeFloat
        6s
        ease-in-out
        infinite;
}

/* =========================================================
   ENERGY BEAM BEHIND EACH NODE
   ========================================================= */

.ecosystem-wrapper .eco::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:260px;
    height:2px;

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            rgba(215,170,70,.55),
            rgba(215,170,70,.16),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(215,170,70,.30);

    opacity:.55;

    pointer-events:none;

    z-index:-1;
}

/* =========================================================
   NODE ENERGY POINT
   ========================================================= */

.ecosystem-wrapper .eco::before{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#e5b95d;

    box-shadow:
        0 0 10px
        #e5b95d,

        0 0 25px
        rgba(229,185,93,.75);

    top:-4px;
    left:50%;

    transform:
        translateX(-50%);

    animation:
        arsEcoNodeLight
        3s
        ease-in-out
        infinite;
}

/* =========================================================
   NODE TYPOGRAPHY
   ========================================================= */

.ecosystem-wrapper .eco h3{
    margin:
        0 0 9px;

    font-size:
        1.05rem;

    color:
        #f4f4f4;

    letter-spacing:
        .02em;
}

.ecosystem-wrapper .eco p{
    margin:0;

    font-size:
        .78rem;

    line-height:
        1.5;

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

/* =========================================================
   PRECISE 9 NODE ORBITAL POSITIONS
   ========================================================= */

/* 01 — TOP CENTER */

.ecosystem-wrapper .eco-1{
    top:3%;
    left:50%;

    transform:
        translateX(-50%);
}

/* 02 — UPPER RIGHT */

.ecosystem-wrapper .eco-2{
    top:15%;
    right:4%;
}

/* 03 — RIGHT CENTER */

.ecosystem-wrapper .eco-3{
    top:42%;
    right:0;
}

/* 04 — LOWER RIGHT */

.ecosystem-wrapper .eco-4{
    bottom:12%;
    right:6%;
}

/* 05 — BOTTOM CENTER */

.ecosystem-wrapper .eco-5{
    bottom:2%;
    left:50%;

    transform:
        translateX(-50%);
}

/* 06 — LOWER LEFT */

.ecosystem-wrapper .eco-6{
    bottom:12%;
    left:6%;
}

/* 07 — LEFT CENTER */

.ecosystem-wrapper .eco-7{
    top:42%;
    left:0;
}

/* 08 — UPPER LEFT */

.ecosystem-wrapper .eco-8{
    top:15%;
    left:4%;
}

/* 09 — INNER TOP LEFT */

.ecosystem-wrapper .eco-9{
    top:3%;
    left:26%;
}

/* =========================================================
   HOVER
   ========================================================= */

.ecosystem-wrapper .eco:hover{
    transform:
        translateY(-10px)
        scale(1.05);

    border-color:
        rgba(224,180,83,.90);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.55),

        0 0 40px
        rgba(215,170,70,.22);

    z-index:30;
}

/* =========================================================
   ORBITAL ROTATION
   ========================================================= */

@keyframes arsEcoOrbitA{

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

    100%{
        transform:
            translate(-50%,-50%)
            rotate(-10deg)
            rotate(360deg);
    }

}

@keyframes arsEcoOrbitB{

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

    100%{
        transform:
            translate(-50%,-50%)
            rotate(14deg)
            rotate(360deg);
    }

}

/* =========================================================
   CORE ANIMATION
   ========================================================= */

@keyframes arsEcoCorePulse{

    0%,100%{
        box-shadow:
            0 0 25px
            rgba(215,170,70,.22),

            0 0 70px
            rgba(215,170,70,.08),

            inset 0 0 35px
            rgba(215,170,70,.10);
    }

    50%{
        box-shadow:
            0 0 40px
            rgba(215,170,70,.42),

            0 0 110px
            rgba(215,170,70,.18),

            inset 0 0 50px
            rgba(215,170,70,.20);
    }

}

/* =========================================================
   CORE RINGS
   ========================================================= */

@keyframes arsEcoCoreRing{

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

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

}

@keyframes arsEcoCoreOuterRing{

    from{
        transform:
            rotate(0deg)
            scale(.94);
        opacity:.3;
    }

    50%{
        opacity:.8;
    }

    to{
        transform:
            rotate(-360deg)
            scale(1.06);
        opacity:.3;
    }

}

/* =========================================================
   NODE FLOAT
   ========================================================= */

@keyframes arsEcoNodeFloat{

    0%,100%{
        margin-top:0;
    }

    50%{
        margin-top:-7px;
    }

}

/* =========================================================
   NODE LIGHT
   ========================================================= */

@keyframes arsEcoNodeLight{

    0%,100%{
        opacity:.55;

        box-shadow:
            0 0 8px
            #e5b95d,

            0 0 18px
            rgba(229,185,93,.45);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 14px
            #e5b95d,

            0 0 35px
            rgba(229,185,93,.9);
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .ecosystem-wrapper{
        width:96vw;
        height:760px;
    }

    .ecosystem-wrapper::before{
        width:760px;
        height:410px;
    }

    .ecosystem-wrapper::after{
        width:600px;
        height:330px;
    }

    .ecosystem-wrapper .eco{
        width:165px;
        min-height:105px;
    }

    .ecosystem-wrapper .eco-2{
        right:1%;
    }

    .ecosystem-wrapper .eco-8{
        left:1%;
    }

    .ecosystem-wrapper .eco-3{
        right:-1%;
    }

    .ecosystem-wrapper .eco-7{
        left:-1%;
    }

    .ecosystem-wrapper .eco-4{
        right:2%;
    }

    .ecosystem-wrapper .eco-6{
        left:2%;
    }

}

/* =========================================================
   MOBILE — CONTROLLED ORBITAL LAYOUT
   ========================================================= */

@media(max-width:600px){

    .ecosystem{
        padding:
            80px 10px;
    }

    .ecosystem-wrapper{
        width:100%;
        height:920px;

        margin-top:60px;
    }

    .ecosystem-wrapper::before{
        width:94vw;
        height:520px;
    }

    .ecosystem-wrapper::after{
        width:78vw;
        height:430px;
    }

    .ecosystem-center{
        width:150px;
        height:150px;
    }

    .ecosystem-center h3{
        font-size:.82rem;
    }

    .ecosystem-wrapper .eco{
        width:140px;
        min-height:92px;

        padding:
            14px 9px;

        border-radius:18px;
    }

    .ecosystem-wrapper .eco h3{
        font-size:.86rem;
    }

    .ecosystem-wrapper .eco p{
        font-size:.65rem;
    }

    /* TOP CENTER */

    .ecosystem-wrapper .eco-1{
        top:3%;
        left:50%;

        transform:
            translateX(-50%);
    }

    /* UPPER RIGHT */

    .ecosystem-wrapper .eco-2{
        top:15%;
        right:-1%;
    }

    /* RIGHT */

    .ecosystem-wrapper .eco-3{
        top:40%;
        right:-2%;
    }

    /* LOWER RIGHT */

    .ecosystem-wrapper .eco-4{
        bottom:14%;
        right:0;
    }

    /* BOTTOM */

    .ecosystem-wrapper .eco-5{
        bottom:2%;
        left:50%;

        transform:
            translateX(-50%);
    }

    /* LOWER LEFT */

    .ecosystem-wrapper .eco-6{
        bottom:14%;
        left:0;
    }

    /* LEFT */

    .ecosystem-wrapper .eco-7{
        top:40%;
        left:-2%;
    }

    /* UPPER LEFT */

    .ecosystem-wrapper .eco-8{
        top:15%;
        left:-1%;
    }

    /* INNER TOP LEFT */

    .ecosystem-wrapper .eco-9{
        top:3%;
        left:4%;
    }

}

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

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

    .ecosystem-wrapper::before,
    .ecosystem-wrapper::after,
    .ecosystem-center,
    .ecosystem-center::before,
    .ecosystem-center::after,
    .ecosystem-wrapper .eco,
    .ecosystem-wrapper .eco::before{
        animation:none!important;
    }

}


/* =========================================================
   ARS HERITAGE GROUP
   FINAL ECOSYSTEM ORBITAL OVERRIDE
   9 NODES + CENTRAL ENERGY CORE
   ========================================================= */


/* =========================================================
   MAIN ECOSYSTEM
   ========================================================= */

.ecosystem{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}


/* =========================================================
   ORBITAL SYSTEM
   ========================================================= */

.ecosystem-wrapper,
.ecosystem-orbital-system{
    position:relative;
    width:min(1180px,94vw);
    height:820px;
    margin:80px auto 0;

    isolation:isolate;
    perspective:1200px;
}


/* =========================================================
   AMBIENT BACKGROUND ENERGY
   ========================================================= */

.ecosystem-wrapper::before,
.ecosystem-orbital-system::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:min(900px,90vw);
    height:min(500px,50vw);

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

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(215,170,70,.13),
            rgba(215,170,70,.05) 35%,
            transparent 70%
        );

    filter:
        blur(20px);

    pointer-events:none;

    z-index:-5;

    animation:
        ecosystemAmbientPulse
        7s
        ease-in-out
        infinite;
}


/* =========================================================
   ORBIT FIELD
   ========================================================= */

.ecosystem-orbit-field{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;
}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

.ecosystem-orbit{

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

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

    pointer-events:none;

    box-sizing:border-box;
}


/* OUTER */

.ecosystem-orbit.orbit-outer{

    width:900px;
    height:470px;

    border:
        1px solid
        rgba(215,170,70,.28);

    box-shadow:
        0 0 35px
        rgba(215,170,70,.06),

        inset 0 0 35px
        rgba(215,170,70,.035);

    animation:
        ecosystemOuterOrbit
        28s
        linear
        infinite;
}


/* MIDDLE */

.ecosystem-orbit.orbit-middle{

    width:700px;
    height:365px;

    border:
        1px solid
        rgba(215,170,70,.20);

    box-shadow:
        0 0 25px
        rgba(215,170,70,.05);

    animation:
        ecosystemMiddleOrbit
        20s
        linear
        infinite;
}


/* INNER */

.ecosystem-orbit.orbit-inner{

    width:500px;
    height:260px;

    border:
        1px solid
        rgba(215,170,70,.13);

    animation:
        ecosystemInnerOrbit
        15s
        linear
        infinite reverse;
}


/* =========================================================
   ORBITAL GLOW
   ========================================================= */

.ecosystem-orbit-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:760px;
    height:390px;

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

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(215,170,70,.05) 65%,
            transparent 75%
        );

    filter:
        blur(8px);

    pointer-events:none;

    animation:
        ecosystemGlowPulse
        6s
        ease-in-out
        infinite;
}


/* =========================================================
   CENTRAL CORE FIELD
   ========================================================= */

.ecosystem-core-field{

    position:absolute;

    left:50%;
    top:50%;

    width:300px;
    height:300px;

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

    pointer-events:none;

    z-index:5;
}


/* =========================================================
   CORE HALOS
   ========================================================= */

.ecosystem-core-halo{

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

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

    pointer-events:none;
}


.ecosystem-core-halo.halo-outer{

    width:290px;
    height:290px;

    border:
        1px solid
        rgba(215,170,70,.12);

    box-shadow:
        0 0 60px
        rgba(215,170,70,.12);

    animation:
        ecosystemHaloPulse
        5s
        ease-in-out
        infinite;
}


.ecosystem-core-halo.halo-middle{

    width:240px;
    height:240px;

    border:
        1px solid
        rgba(215,170,70,.20);

    box-shadow:
        0 0 45px
        rgba(215,170,70,.16);

    animation:
        ecosystemHaloPulse
        4s
        ease-in-out
        infinite reverse;
}


.ecosystem-core-halo.halo-inner{

    width:190px;
    height:190px;

    border:
        1px solid
        rgba(215,170,70,.30);

    box-shadow:
        0 0 35px
        rgba(215,170,70,.20);
}


/* =========================================================
   CORE LIGHT
   ========================================================= */

.ecosystem-core-light{

    position:absolute;

    left:50%;
    top:50%;

    width:150px;
    height:150px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at center,
            rgba(255,232,164,.42),
            rgba(215,170,70,.18) 28%,
            rgba(215,170,70,.07) 52%,
            transparent 72%
        );

    filter:
        blur(3px);

    box-shadow:
        0 0 35px
        rgba(215,170,70,.28),

        0 0 90px
        rgba(215,170,70,.16);

    animation:
        ecosystemCoreLightPulse
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   CENTRAL CORE
   ========================================================= */

.ecosystem-center{

    position:absolute;

    left:50%;
    top:50%;

    width:210px;
    height:210px;

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

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:50%;

    z-index:20;

    overflow:visible;

    background:
        radial-gradient(
            circle at center,
            rgba(215,170,70,.30),
            rgba(25,25,28,.96) 62%
        );

    border:
        1px solid
        rgba(215,170,70,.72);

    box-shadow:
        0 0 25px
        rgba(215,170,70,.30),

        0 0 70px
        rgba(215,170,70,.16),

        0 0 130px
        rgba(215,170,70,.08),

        inset 0 0 35px
        rgba(215,170,70,.15);

    animation:
        ecosystemCenterPulse
        4s
        ease-in-out
        infinite;
}


/* CORE RING */

.ecosystem-center::before{

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:50%;

    border:
        1px solid
        rgba(215,170,70,.25);

    box-shadow:
        0 0 25px
        rgba(215,170,70,.10);

    animation:
        ecosystemCenterRing
        8s
        linear
        infinite;
}


/* SECONDARY RING */

.ecosystem-center::after{

    content:"";

    position:absolute;

    inset:-30px;

    border-radius:50%;

    border:
        1px solid
        rgba(215,170,70,.10);

    animation:
        ecosystemCenterRingReverse
        12s
        linear
        infinite;
}


.ecosystem-center-label{

    position:relative;

    margin-bottom:7px;

    font-size:.58rem;

    letter-spacing:.20em;

    color:
        rgba(255,255,255,.50);
}


.ecosystem-center h3{

    position:relative;

    margin:0;

    font-size:1.15rem;

    line-height:1.45;

    letter-spacing:.12em;

    color:
        #f3d58e;

    text-shadow:
        0 0 15px
        rgba(215,170,70,.40);
}


.ecosystem-center-subtitle{

    position:relative;

    margin-top:8px;

    font-size:.52rem;

    letter-spacing:.18em;

    color:
        rgba(255,255,255,.42);
}


/* =========================================================
   9 ENERGY CONNECTION LINES
   ========================================================= */

.ecosystem-energy-network{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;
}


.ecosystem-energy-link{

    position:absolute;

    left:50%;
    top:50%;

    width:1px;

    height:0;

    transform-origin:
        0 0;

    background:ygʻþ5
        linear-gradient(
            to bottom,
            rgba(215,170,70,.55),
            rgba(215,170,70,.12),
            transparent
        );

    opacity:.48;

    box-shadow:
        0 0 8px
        rgba(215,170,70,.12);
}


/* INDIVIDUAL ENERGY LINES */

.energy-link-1{
    height:270px;
    transform:rotate(0deg);
}

.energy-link-2{
    height:270px;
    transform:rotate(40deg);
}

.energy-link-3{
    height:270px;
    transform:rotate(80deg);
}

.energy-link-4{
    height:270px;
    transform:rotate(120deg);
}

.energy-link-5{
    height:270px;
    transform:rotate(160deg);
}

.energy-link-6{
    height:270px;
    transform:rotate(200deg);
}

.energy-link-7{
    height:270px;
    transform:rotate(240deg);
}

.energy-link-8{
    height:270px;
    transform:rotate(280deg);
}

.energy-link-9{
    height:270px;
    transform:rotate(320deg);
}


/* MOVING ENERGY PARTICLE */

.ecosystem-energy-link i{

    position:absolute;

    left:50%;

    top:10%;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        #f0c968;

    box-shadow:
        0 0 8px
        #f0c968,

        0 0 20px
        rgba(240,201,104,.65);

    transform:
        translateX(-50%);

    animation:
        ecosystemEnergyTravel
        3.5s
        ease-in-out
        infinite;
}


/* DIFFERENT TIMINGS */

.energy-link-2 i{animation-delay:.4s;}
.energy-link-3 i{animation-delay:.8s;}
.energy-link-4 i{animation-delay:1.2s;}
.energy-link-5 i{animation-delay:1.6s;}
.energy-link-6 i{animation-delay:2s;}
.energy-link-7 i{animation-delay:2.4s;}
.energy-link-8 i{animation-delay:2.8s;}
.energy-link-9 i{animation-delay:3.2s;}


/* =========================================================
   9 NODES — BASE
   ========================================================= */

.ecosystem-wrapper .eco,
.ecosystem-orbital-system .eco{

    position:absolute;

    width:190px;
    min-height:115px;

    padding:20px 18px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    z-index:25;

    border-radius:20px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(34,35,39,.96),
            rgba(12,13,16,.96)
        );

    border:
        1px solid
        rgba(215,170,70,.38);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.48),

        0 0 25px
        rgba(215,170,70,.06);

    backdrop-filter:
        blur(16px);

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

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .4s ease,
        opacity .4s ease;

    animation:
        ecosystemNodeFloat
        6s
        ease-in-out
        infinite;
}


/* =========================================================
   NODE GOLD ENERGY DOT
   ========================================================= */

.ecosystem-wrapper .eco::before,
.ecosystem-orbital-system .eco::before{

    content:"";

    position:absolute;

    top:-5px;

    left:50%;

    width:7px;
    height:7px;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:
        #e7bd62;

    box-shadow:
        0 0 10px
        #e7bd62,

        0 0 25px
        rgba(231,189,98,.70);
}


/* =========================================================
   NODE CONTENT
   ========================================================= */

.eco-node-index{

    margin-bottom:5px;

    font-size:.55rem;

    letter-spacing:.18em;

    color:
        rgba(215,170,70,.65);
}


.eco-node-category{

    margin-bottom:5px;

    font-size:.58rem;

    letter-spacing:.14em;

    color:
        rgba(255,255,255,.42);
}


.ecosystem-wrapper .eco h3,
.ecosystem-orbital-system .eco h3{

    margin:
        0 0 7px;

    font-size:
        1rem;

    line-height:
        1.3;

    color:
        #f4f4f4;
}


.ecosystem-wrapper .eco p,
.ecosystem-orbital-system .eco p{

    margin:0;

    font-size:
        .72rem;

    line-height:
        1.45;

    color:
        rgba(255,255,255,.54);
}


/* =========================================================
   NODE ENERGY
   ========================================================= */

.eco-node-energy{

    position:absolute;

    bottom:10px;

    width:35px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215,170,70,.65),
            transparent
        );

    opacity:.5;
}


/* =========================================================
   9 NODE POSITIONS
   ========================================================= */


/* 01 TOP */

.ecosystem-wrapper .eco-1,
.ecosystem-orbital-system .eco-1{

    top:4%;
    left:50%;

    transform:
        translateX(-50%);
}


/* 02 TOP RIGHT */

.ecosystem-wrapper .eco-2,
.ecosystem-orbital-system .eco-2{

    top:15%;
    right:7%;
}


/* 03 RIGHT */

.ecosystem-wrapper .eco-3,
.ecosystem-orbital-system .eco-3{

    top:43%;
    right:0;
}


/* 04 BOTTOM RIGHT */

.ecosystem-wrapper .eco-4,
.ecosystem-orbital-system .eco-4{

    bottom:9%;
    right:7%;
}


/* 05 BOTTOM */

.ecosystem-wrapper .eco-5,
.ecosystem-orbital-system .eco-5{

    bottom:1%;
    left:50%;

    transform:
        translateX(-50%);
}


/* 06 BOTTOM LEFT */

.ecosystem-wrapper .eco-6,
.ecosystem-orbital-system .eco-6{

    bottom:9%;
    left:7%;
}


/* 07 LEFT */

.ecosystem-wrapper .eco-7,
.ecosystem-orbital-system .eco-7{

    top:43%;
    left:0;
}


/* 08 TOP LEFT */

.ecosystem-wrapper .eco-8,
.ecosystem-orbital-system .eco-8{

    top:15%;
    left:7%;
}


/* 09 UPPER LEFT INNER */

.ecosystem-wrapper .eco-9,
.ecosystem-orbital-system .eco-9{

    top:4%;
    left:21%;
}


/* =========================================================
   NODE HOVER
   ========================================================= */

.ecosystem-wrapper .eco:hover,
.ecosystem-orbital-system .eco:hover{

    transform:
        translateY(-10px)
        scale(1.05);

    border-color:
        rgba(230,188,94,.90);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.60),

        0 0 35px
        rgba(215,170,70,.20),

        0 0 70px
        rgba(215,170,70,.08);

    z-index:40;
}


.ecosystem-wrapper .eco-1:hover,
.ecosystem-orbital-system .eco-1:hover,
.ecosystem-wrapper .eco-5:hover,
.ecosystem-orbital-system .eco-5:hover{

    transform:
        translateX(-50%)
        translateY(-10px)
        scale(1.05);
}


/* =========================================================
   ORBITAL PARTICLES
   ========================================================= */

.ecosystem-orbital-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:8;
}


.orbital-particle{

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:
        #e7bd62;

    box-shadow:
        0 0 8px
        #e7bd62,

        0 0 18px
        rgba(231,189,98,.6);

    animation:
        ecosystemParticlePulse
        3s
        ease-in-out
        infinite;
}


.particle-1{left:20%;top:28%;}
.particle-2{left:28%;top:18%;}
.particle-3{left:42%;top:12%;}
.particle-4{left:58%;top:13%;}
.particle-5{left:73%;top:24%;}
.particle-6{left:82%;top:40%;}
.particle-7{left:76%;top:64%;}
.particle-8{left:62%;top:79%;}
.particle-9{left:43%;top:84%;}
.particle-10{left:26%;top:72%;}
.particle-11{left:15%;top:55%;}
.particle-12{left:12%;top:38%;}


/* =========================================================
   ENERGY RAYS
   ========================================================= */

.ecosystem-energy-rays{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:2;

    opacity:.4;
}


.energy-ray{

    position:absolute;

    left:50%;
    top:50%;

    width:1px;
    height:400px;

    transform-origin:
        0 0;

    background:
        linear-gradient(
            to bottom,
            rgba(215,170,70,.15),
            transparent
        );

    animation:
        ecosystemRayPulse
        5s
        ease-in-out
        infinite;
}


.ray-1{transform:rotate(20deg);}
.ray-2{transform:rotate(80deg);}
.ray-3{transform:rotate(140deg);}
.ray-4{transform:rotate(200deg);}
.ray-5{transform:rotate(260deg);}
.ray-6{transform:rotate(320deg);}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes ecosystemAmbientPulse{

    0%,100%{
        opacity:.55;
        transform:
            translate(-50%,-50%)
            scale(.96);
    }

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.04);
    }

}


@keyframes ecosystemOuterOrbit{

    from{
        transform:
            translate(-50%,-50%)
            rotate(-8deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(352deg);
    }

}


@keyframes ecosystemMiddleOrbit{

    from{
        transform:
            translate(-50%,-50%)
            rotate(8deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(-352deg);
    }

}


@keyframes ecosystemInnerOrbit{

    from{
        transform:
            translate(-50%,-50%)
            rotate(-12deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(348deg);
    }

}


@keyframes ecosystemGlowPulse{

    0%,100%{
        opacity:.35;
    }

    50%{
        opacity:.85;
    }

}


@keyframes ecosystemHaloPulse{

    0%,100%{
        opacity:.45;
        transform:
            translate(-50%,-50%)
            scale(.96);
    }

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.04);
    }

}


@keyframes ecosystemCoreLightPulse{

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

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.08);
    }

}


@keyframes ecosystemCenterPulse{

    0%,100%{
        box-shadofl4qk
            0 0 25px
            rgba(215,170,70,.25),

            0 0 70px
            rgba(215,170,70,.12),

            inset 0 0 35px
            rgba(215,170,70,.12);
    }

    50%{
        box-shadow:
            0 0 35px
            rgba(215,170,70,.42),

            0 0 100px
            rgba(215,170,70,.20),

            inset 0 0 45px
            rgba(215,170,70,.20);
    }

}


@keyframes ecosystemCenterRing{

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

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

}


@keyframes ecosystemCenterRingReverse{

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

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

}


@keyframes ecosystemEnergyTravel{

    0%{
        top:5%;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    85%{
        opacity:1;
    }

    100%{
        top:95%;
        opacity:0;
    }

}


@keyframes ecosystemNodeFloat{

    0%,100%{
        margin-top:0;
    }

    50%{
        margin-top:-5px;
    }

}


@keyframes ecosystemParticlePulse{

    0%,100%{
        opacity:.25;
        transform:scale(.7);
    }

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

}


@keyframes ecosystemRayPulse{

    0%,100%{
        opacity:.15;
    }

    50%{
        opacity:.65;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .ecosystem-wrapper,
    .ecosystem-orbital-system{

        width:96vw;
        height:760px;
    }


    .ecosystem-orbit.orbit-outer{

        width:760px;
        height:410px;
    }


    .ecosystem-orbit.orbit-middle{

        width:610px;
        height:330px;
    }


    .ecosystem-orbit.orbit-inner{

        width:450px;
        height:245px;
    }


    .ecosystem-wrapper .eco,
    .ecosystem-orbital-system .eco{

        width:165px;
        min-height:105px;
    }


    .ecosystem-wrapper .eco-2,
    .ecosystem-orbital-system .eco-2,
    .ecosystem-wrapper .eco-8,
    .ecosystem-orbital-system .eco-8{

        right:3%;
        left:auto;
    }


    .ecosystem-wrapper .eco-7,
    .ecosystem-orbital-system .eco-7{

        left:3%;
    }


    .ecosystem-wrapper .eco-3,
    .ecosystem-orbital-system .eco-3,
    .ecosystem-wrapper .eco-4,
    .ecosystem-orbital-system .eco-4{

        right:0;
    }


    .ecosystem-wrapper .eco-6,
    .ecosystem-orbital-system .eco-6{

        left:0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .ecosystem{

        padding:
            70px 10px;
    }


    .ecosystem-wrapper,
    .ecosystem-orbital-system{

        width:100%;
        height:900px;

        margin-top:50px;
    }


    .ecosystem-orbit.orbit-outer{

        width:92vw;
        height:500px;
    }


    .ecosystem-orbit.orbit-middle{

        width:78vw;
        height:420px;
    }


    .ecosystem-orbit.orbit-inner{

        width:62vw;
        height:340px;
    }


    .ecosystem-center{

        width:150px;
        height:150px;
    }


    .ecosystem-center h3{

        font-size:.85rem;
    }


    .ecosystem-center-label{

        font-size:.45rem;
    }


    .ecosystem-center-subtitle{

        font-size:.40rem;
    }


    .ecosystem-wrapper .eco,
    .ecosystem-orbital-system .eco{

        width:140px;
        min-height:95px;

        padding:
            14px 9px;

        border-radius:17px;
    }


    .ecosystem-wrapper .eco h3,
    .ecosystem-orbital-system .eco h3{

        font-size:.82rem;
    }


    .ecosystem-wrapper .eco p,
    .ecosystem-orbital-system .eco p{

        font-size:.62rem;
    }


    /* TOP */

    .ecosystem-wrapper .eco-1,
    .ecosystem-orbital-system .eco-1{

        top:3%;
        left:50%;
    }


    /* TOP RIGHT */

    .ecosystem-wrapper .eco-2,
    .ecosystem-orbital-system .eco-2{

        top:16%;
        right:0;
    }


    /* RIGHT */

    .ecosystem-wrapper .eco-3,
    .ecosystem-orbital-system .eco-3{

        top:39%;
        right:-2%;
    }


    /* BOTTOM RIGHT */

    .ecosystem-wrapper .eco-4,
    .ecosystem-orbital-system .eco-4{

        bottom:15%;
        right:0;
    }


    /* BOTTOM */

    .ecosystem-wrapper .eco-5,
    .ecosystem-orbital-system .eco-5{

        bottom:3%;
        left:50%;
    }


    /* BOTTOM LEFT */

    .ecosystem-wrapper .eco-6,
    .ecosystem-orbital-system .eco-6{

        bottom:15%;
        left:0;
    }


    /* LEFT */

    .ecosystem-wrapper .eco-7,
    .ecosystem-orbital-system .eco-7{

        top:39%;
        left:-2%;
    }


    /* TOP LEFT */

    .ecosystem-wrapper .eco-8,
    .ecosystem-orbital-system .eco-8{

        top:16%;
        left:0;
    }


    /* OUTER TOP LEFT */

    .ecosystem-wrapper .eco-9,
    .ecosystem-orbital-system .eco-9{

        top:3%;
        left:3%;
    }

}


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

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

    .ecosystem-wrapper::before,
    .ecosystem-orbital-system::before,
    .ecosystem-orbit,
    .ecosystem-orbit-glow,
    .ecosystem-core-halo,
    .ecosystem-core-light,
    .ecosystem-center,
    .ecosystem-center::before,
    .ecosystem-center::after,
    .ecosystem-energy-link i,
    .ecosystem-wrapper .eco,
    .ecosystem-orbital-system .eco,
    .orbital-particle,
    .energy-ray{

        animation:none!important;
    }

             }
/* =========================================================
   ARS HERITAGE GROUP
   9-NODE ECOSYSTEM POSITION LOCK
   FINAL OVERRIDE — CURRENT HTML STRUCTURE
   ========================================================= */


/* =========================================================
   ECOSYSTEM WRAPPER — POSITIONING CONTEXT
   ========================================================= */

.ecosystem-wrapper{

    position:relative;

    isolation:isolate;

}


/* =========================================================
   ALL 9 ECOSYSTEM NODES — HARD BASE LOCK
   ========================================================= */

.ecosystem-wrapper > .eco{

    position:absolute !important;

    width:190px !important;

    min-height:115px !important;

    box-sizing:border-box;

    margin:0 !important;

    z-index:50 !important;

}


/* =========================================================
   NODE 01 — TOP CENTER
   ========================================================= */

.ecosystem-wrapper > .eco-1{

    top:5% !important;

    left:50% !important;

    right:auto !important;

    bottom:auto !important;

    transform:translateX(-50%) !important;

}


/* =========================================================
   NODE 02 — TOP RIGHT
   ========================================================= */

.ecosystem-wrapper > .eco-2{

    top:15% !important;

    right:7% !important;

    left:auto !important;

    bottom:auto !important;

    transform:none !important;

}


/* =========================================================
   NODE 03 — RIGHT CENTER
   ========================================================= */

.ecosystem-wrapper > .eco-3{

    top:42% !important;

    right:1% !important;

    left:auto !important;

    bottom:auto !important;

    transform:none !important;

}


/* =========================================================
   NODE 04 — BOTTOM RIGHT
   ========================================================= */

.ecosystem-wrapper > .eco-4{

    bottom:10% !important;

    right:7% !important;

    left:auto !important;

    top:auto !important;

    transform:none !important;

}


/* =========================================================
   NODE 05 — BOTTOM CENTER
   ========================================================= */

.ecosystem-wrapper > .eco-5{

    bottom:3% !important;

    left:50% !important;

    right:auto !important;

    top:auto !important;

    transform:translateX(-50%) !important;

}


/* =========================================================
   NODE 06 — BOTTOM LEFT
   ========================================================= */

.ecosystem-wrapper > .eco-6{

    bottom:10% !important;

    left:7% !important;

    right:auto !important;

    top:auto !important;

    transform:none !important;

}


/* =========================================================
   NODE 07 — LEFT CENTER
   ========================================================= */

.ecosystem-wrapper > .eco-7{

    top:42% !important;

    left:1% !important;

    right:auto !important;

    bottom:auto !important;

    transform:none !important;

}


/* =========================================================
   NODE 08 — TOP LEFT
   ========================================================= */

.ecosystem-wrapper > .eco-8{

    top:15% !important;

    left:7% !important;

    right:auto !important;

    bottom:auto !important;

    transform:none !important;

}


/* =========================================================
   NODE 09 — LEFT / LOWER CENTER
   ========================================================= */

.ecosystem-wrapper > .eco-9{

    bottom:28% !important;

    left:7% !important;

    right:auto !important;

    top:auto !important;

    transform:none !important;

}


/* =========================================================
   CENTER CORE — ALWAYS ABOVE ORBITAL GRAPHICS
   ========================================================= */

.ecosystem-wrapper > .ecosystem-center{

    position:absolute !important;

    top:50% !important;

    left:50% !important;

    right:auto !important;

    bottom:auto !important;

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

    z-index:60 !important;

}


/* =========================================================
   ENERGY NETWORK — BELOW NODES
   ========================================================= */

.ecosystem-energy-network{

    z-index:15 !important;

    pointer-events:none;

}


/* =========================================================
   ORBITAL FIELD — BELOW NODES
   ========================================================= */

.ecosystem-orbit-field{

    z-index:5 !important;

    pointer-events:none;

}


/* =========================================================
   ORBITAL PARTICLES — BELOW NODES
   ========================================================= */

.ecosystem-orbital-particles{

    z-index:10 !important;

    pointer-events:none;

}


/* =========================================================
   ENERGY RAYS — BACKGROUND LAYER
   ========================================================= */

.ecosystem-energy-rays{

    z-index:3 !important;

    pointer-events:none;

}


/* =========================================================
   NODE INTERACTION
   ========================================================= */

.ecosystem-wrapper > .eco:hover{

    z-index:80 !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .ecosystem-wrapper > .eco{

        width:165px !important;

        min-height:105px !important;

    }


    .ecosystem-wrapper > .eco-2,
    .ecosystem-wrapper > .eco-8{

        right:3% !important;

        left:auto !important;

    }


    .ecosystem-wrapper > .eco-7,
    .ecosystem-wrapper > .eco-9{

        left:3% !important;

        right:auto !important;

    }


    .ecosystem-wrapper > .eco-3,
    .ecosystem-wrapper > .eco-4{

        right:0 !important;

    }


    .ecosystem-wrapper > .eco-6{

        left:0 !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .ecosystem-wrapper{

        width:100%;

        height:900px;

        position:relative;

    }


    .ecosystem-wrapper > .eco{

        width:140px !important;

        min-height:95px !important;

        padding:14px 9px !important;

        border-radius:17px;

    }


    .ecosystem-wrapper > .eco h3{

        font-size:.82rem;

    }


    .ecosystem-wrapper > .eco p{

        font-size:.62rem;

    }


    /* ================================================
       NODE 01 — TOP CENTER
       ================================================ */

    .ecosystem-wrapper > .eco-1{

        top:3% !important;

        left:50% !important;

        right:auto !important;

        bottom:auto !important;

        transform:translateX(-50%) !important;

    }


    /* ================================================
       NODE 02 — TOP RIGHT
       ================================================ */

    .ecosystem-wrapper > .eco-2{

        top:16% !important;

        right:0 !important;

        left:auto !important;

        bottom:auto !important;

        transform:none !important;

    }


    /* ================================================
       NODE 03 — RIGHT CENTER
       ================================================ */

    .ecosystem-wrapper > .eco-3{

        top:39% !important;

        right:0 !important;

        left:auto !important;

        bottom:auto !important;

        transform:none !important;

    }


    /* ================================================
       NODE 04 — BOTTOM RIGHT
       ================================================ */

    .ecosystem-wrapper > .eco-4{

        bottom:15% !important;

        right:0 !important;

        left:auto !important;

        top:auto !important;

        transform:none !important;

    }


    /* ================================================
       NODE 05 — BOTTOM CENTER
       ================================================ */

    .ecosystem-wrapper > .eco-5{

        bottom:2% !important;

        left:50% !important;

        right:auto !important;

        top:auto !important;

        transform:translateX(-50%) !important;

    }


    /* ================================================
       NODE 06 — BOTTOM LEFT
       ================================================ */

    .ecosystem-wrapper > .eco-6{

        bottom:15% !important;

        left:0 !important;

        right:auto !important;

        top:auto !important;

        transform:none !important;

    }


    /* ================================================
       NODE 07 — LEFT CENTER
       ================================================ */

    .ecosystem-wrapper > .eco-7{

        top:39% !important;

        left:0 !important;

        right:auto !important;

        bottom:auto !important;

        transform:none !important;

    }


    /* ================================================
       NODE 08 — TOP LEFT
       ================================================ */

    .ecosystem-wrapper > .eco-8{

        top:16% !important;

        left:0 !important;

        right:auto !important;

        bottom:auto !important;

        transform:none !important;

    }


    /* ================================================
       NODE 09 — LEFT / LOWER CENTER
       ================================================ */

    .ecosystem-wrapper > .eco-9{

        top:62% !important;

        left:0 !important;

        right:auto !important;

        bottom:auto !important;

        transform:none !important;

    }


    /* ================================================
       CENTER CORE
       ================================================ */

    .ecosystem-wrapper > .ecosystem-center{

        top:50% !important;

        left:50% !important;

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

        z-index:60 !important;

    }

}


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

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

    .ecosystem-wrapper > .eco{

        transition:none !important;

    }

}


/* =========================================================
ARS HERITAGE GROUP
JOURNEY / TIMELINE
FINAL ANIMATION PATCH
HTML TARGET:

.timeline
└── .timeline-grid
├── .timeline-card
├── .timeline-card
├── .timeline-card
└── .timeline-card

IMPORTANT:
This patch is ONLY for the Journey / Timeline section.
========================================================= */

/* =========================================================
TIMELINE ANIMATION SCOPE
========================================================= */

.timeline{

position:relative;

isolation:isolate;

overflow:hidden;

}

/* =========================================================
TIMELINE GRID
========================================================= */

.timeline
.timeline-grid{

position:relative;

isolation:isolate;

}

/* =========================================================
FOUR TIMELINE CARDS
INITIAL STATE
========================================================= */

.timeline
.timeline-grid
.timeline-card{

position:relative;

opacity:0;

transform:
    translateY(45px)
    scale(.97);

will-change:
    opacity,
    transform;

animation:

    journeyCardEnter
    .9s
    cubic-bezier(.2,.75,.2,1)
    forwards;

}

/* =========================================================
STAGGERED ENTRY
========================================================= */

.timeline
.timeline-grid
.timeline-card:nth-child(1){

animation-delay:.15s;

}

.timeline
.timeline-grid
.timeline-card:nth-child(2){

animation-delay:.35s;

}

.timeline
.timeline-grid
.timeline-card:nth-child(3){

animation-delay:.55s;

}

.timeline
.timeline-grid
.timeline-card:nth-child(4){

animation-delay:.75s;

}

/* =========================================================
CARD ENTRY ANIMATION
========================================================= */

@keyframes journeyCardEnter{

0%{

    opacity:0;

    transform:
        translateY(45px)
        scale(.97);

    filter:
        blur(5px);

}

65%{

    opacity:1;

    filter:
        blur(0);

}

100%{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

}

}

/* =========================================================
GOLD INDUSTRIAL TOP ENERGY
========================================================= */

.timeline
.timeline-card::before{

content:"";

position:absolute;

top:0;

left:8%;

width:84%;

height:1px;

transform:
    scaleX(0);

transform-origin:
    center;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(210,164,69,.35),
        rgba(239,203,126,.95),
        rgba(210,164,69,.35),
        transparent
    );

box-shadow:

    0 0 10px
    rgba(222,178,83,.45),

    0 0 25px
    rgba(214,166,72,.15);

animation:

    journeyEnergyReveal
    1.1s
    ease-out
    forwards;

}

.timeline
.timeline-card:nth-child(1)::before{

animation-delay:.55s;

}

.timeline
.timeline-card:nth-child(2)::before{

animation-delay:.75s;

}

.timeline
.timeline-card:nth-child(3)::before{

animation-delay:.95s;

}

.timeline
.timeline-card:nth-child(4)::before{

animation-delay:1.15s;

}

@keyframes journeyEnergyReveal{

from{

    transform:
        scaleX(0);

    opacity:0;

}

to{

    transform:
        scaleX(1);

    opacity:.9;

}

}

/* =========================================================
PHASE NUMBER / LABEL
========================================================= */

.timeline
.timeline-card

«span{»

position:relative;

display:inline-block;

transition:

    color .45s ease,

    text-shadow .45s ease,

    transform .45s ease;

}

/* =========================================================
TITLE
========================================================= */

.timeline
.timeline-card
h3{

position:relative;

transition:

    color .45s ease,

    transform .45s ease,

    text-shadow .45s ease;

}

/* =========================================================
DESCRIPTION
========================================================= */

.timeline
.timeline-card
p{

position:relative;

transition:

    color .45s ease;

}

/* =========================================================
LUXURY HOVER
========================================================= */

.timeline
.timeline-card:hover{

transform:
    translateY(-10px)
    scale(1.015);

border-color:

    rgba(216,173,83,.35);

box-shadow:

    0 25px 65px
    rgba(0,0,0,.3),

    0 0 35px
    rgba(213,164,69,.09);

}

/* =========================================================
HOVER ENERGY
========================================================= */

.timeline
.timeline-card:hover::before{

box-shadow:

    0 0 14px
    rgba(239,203,126,.8),

    0 0 30px
    rgba(215,165,68,.25);

}

/* =========================================================
HOVER TEXT RESPONSE
========================================================= */

.timeline
.timeline-card:hover

«span{»

color:

    rgba(237,199,116,.98);

text-shadow:

    0 0 14px
    rgba(222,174,75,.3);

transform:
    translateX(3px);

}

.timeline
.timeline-card:hover
h3{

color:

    rgba(255,249,228,1);

transform:
    translateX(3px);

text-shadow:

    0 0 18px
    rgba(225,180,89,.12);

}

.timeline
.timeline-card:hover
p{

color:

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

}

/* =========================================================
SMALL INDUSTRIAL ENERGY PARTICLE
========================================================= */

.timeline
.timeline-card::after{

content:"";

position:absolute;

right:20px;

bottom:20px;

width:4px;

height:4px;

border-radius:50%;

background:

    rgba(241,207,135,.9);

box-shadow:

    0 0 8px
    rgba(241,207,135,.8),

    0 0 20px
    rgba(211,161,63,.3);

opacity:.25;

animation:

    journeyParticle
    4s
    ease-in-out
    infinite;

}

.timeline
.timeline-card:nth-child(2)::after{

animation-delay:1s;

}

.timeline
.timeline-card:nth-child(3)::after{

animation-delay:2s;

}

.timeline
.timeline-card:nth-child(4)::after{

animation-delay:3s;

}

@keyframes journeyParticle{

0%,
100%{

    transform:
        translateY(0)
        scale(.7);

    opacity:.2;

}

50%{

    transform:
        translateY(-12px)
        scale(1.35);

    opacity:.9;

}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width:680px){

.timeline
.timeline-card:hover{

    transform:
        translateY(-6px)
        scale(1.01);

}

}

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

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

.timeline
.timeline-card{

    opacity:1;

    transform:none;

    animation:none;

    transition:none;

}


.timeline
.timeline-card::before,
.timeline
.timeline-card::after{

    animation:none;

}

}

/* =========================================================
   ARS HERITAGE — ULTRA SUBTLE PREMIUM GLASS OVERRIDE
   REPLACE PREVIOUS SELECTED-CARDS OVERRIDE WITH THIS
   ========================================================= */


/* =========================================================
   TARGET SECTIONS
   ========================================================= */

.who-left,
.who-right,

.mission-card,

.value-card,

.vision-card,

.dna-card,

.country-card,

.future-card,

.stat-card,

.partnership-card{


    position:relative;

    overflow:hidden;

    isolation:isolate;


    /* -----------------------------------------
       VERY SUBTLE GLASS
       ----------------------------------------- */

    background:

        linear-gradient(
            115deg,

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

            rgba(228,185,95,.055) 43%,

            rgba(28,43,67,.17) 46%,

            rgba(13,25,43,.25) 100%
        );


    border:

        1px solid
        rgba(228,185,95,.10);


    box-shadow:

        0 12px 38px
        rgba(0,0,0,.14),

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


    backdrop-filter:

        blur(16px)
        saturate(115%);

    -webkit-backdrop-filter:

        blur(16px)
        saturate(115%);


    transition:

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

        background .55s ease,

        border-color .55s ease,

        box-shadow .55s ease,

        filter .55s ease;

}


/* =========================================================
   SUBTLE GOLD / NAVY LIGHT SPLIT
   ========================================================= */

.who-left::before,
.who-right::before,

.mission-card::before,

.value-card::before,

.vision-card::before,

.dna-card::before,

.country-card::before,

.future-card::before,

.stat-card::before,

.partnership-card::before{


    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;


    background:

        linear-gradient(
            115deg,

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

            rgba(228,185,95,.035) 42%,

            rgba(19,34,56,.12) 47%,

            rgba(9,21,38,.18)
        );


    opacity:.65;

}


/* =========================================================
   VERY SUBTLE ENERGY PARTICLES
   ========================================================= */

.who-left::after,
.who-right::after,

.mission-card::after,

.value-card::after,

.vision-card::after,

.dna-card::after,

.country-card::after,

.future-card::after,

.stat-card::after,

.partnership-card::after{


    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;


    background-image:

        radial-gradient(
            circle at 12% 22%,
            rgba(228,185,95,.16) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 76% 18%,
            rgba(255,244,199,.10) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 88% 72%,
            rgba(228,185,95,.12) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 34% 84%,
            rgba(184,137,63,.10) 0 1px,
            transparent 2px
        );


    background-size:

        170px 150px,
        220px 190px,
        190px 170px,
        240px 210px;


    opacity:.24;

    animation:

        arsSubtleEnergy
        14s
        ease-in-out
        infinite;

}


/* =========================================================
   HOVER / SELECTED STATE
   ========================================================= */

.who-left:hover,
.who-right:hover,

.mission-card:hover,

.value-card:hover,

.vision-card:hover,

.dna-card:hover,

.country-card:hover,

.future-card:hover,

.stat-card:hover,

.partnership-card:hover{


    background:

        linear-gradient(
            115deg,

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

            rgba(228,185,95,.10) 43%,

            rgba(28,43,67,.27) 46%,

            rgba(13,25,43,.38) 100%
        );


    border-color:

        rgba(228,185,95,.28);


    box-shadow:

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

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

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


    transform:

        translateY(-5px);


    filter:

        saturate(108%);

}


/* =========================================================
   TEXT — NORMAL STATE
   ========================================================= */

.who-left h3,

.mission-card h3,

.value-card h3,

.vision-card h3,

.dna-card h3,

.future-card h3,

.partnership-card h3{


    color:

        rgba(244,214,139,.72);


    transition:

        color .45s ease,

        font-weight .45s ease,

        text-shadow .45s ease;

}


.who-left p,

.mission-card p,

.value-card p,

.vision-card p,

.dna-card p,

.future-card p,

.partnership-card p{


    color:

        rgba(240,244,248,.56);

}


/* =========================================================
   TEXT — HOVER / SELECTED
   ========================================================= */

.who-left:hover h3,

.mission-card:hover h3,

.value-card:hover h3,

.vision-card:hover h3,

.dna-card:hover h3,

.future-card:hover h3,

.partnership-card:hover h3{


    color:

        rgba(248,221,148,.94);


    font-weight:

        700;


    text-shadow:

        0 0 18px
        rgba(228,185,95,.16);

}


.who-left:hover p,

.mission-card:hover p,

.value-card:hover p,

.vision-card:hover p,

.dna-card:hover p,

.future-card:hover p,

.partnership-card:hover p{


    color:

        rgba(240,244,248,.72);

}


/* =========================================================
   GLOBAL STRATEGY — COUNTRY CARDS
   ========================================================= */

.country-card{

    min-height:170px;

}


.country-card span{


    color:

        rgba(244,214,139,.70);


    font-weight:

        600;


    letter-spacing:

        .16em;


    transition:

        color .45s ease,

        font-weight .45s ease,

        text-shadow .45s ease;

}


.country-card:hover span{


    color:

        rgba(248,221,148,.96);


    font-weight:

        700;


    text-shadow:

        0 0 18px
        rgba(228,185,95,.18);

}


/* =========================================================
   ARS BY THE NUMBERS
   ========================================================= */

.stat-card h3{


    color:

        rgba(247,220,145,.76);


    text-shadow:

        0 0 20px
        rgba(228,185,95,.10);


    transition:

        color .45s ease,

        font-weight .45s ease,

        text-shadow .45s ease;

}


.stat-card span{


    color:

        rgba(240,244,248,.52);

}


.stat-card:hover h3{


    color:

        rgba(248,221,148,.98);


    font-weight:

        700;


    text-shadow:

        0 0 25px
        rgba(228,185,95,.22);

}


.stat-card:hover span{


    color:

        rgba(240,244,248,.70);

}


/* =========================================================
   WHO WE ARE IMAGE
   ========================================================= */

.who-right img{


    opacity:

        .72;


    filter:

        saturate(.72)
        contrast(1.02);


    transition:

        opacity .7s ease,

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

}


.who-right:hover img{


    opacity:

        .84;


    transform:

        scale(1.025);

}


/* =========================================================
   SUBTLE FLOATING MOTION
   ========================================================= */

.mission-card,
.value-card,
.vision-card,
.dna-card,
.country-card,
.future-card,
.stat-card,
.partnership-card{


    animation:

        arsUltraSubtleFloat
        10s
        ease-in-out
        infinite;

}


.mission-card:nth-child(2),
.value-card:nth-child(2),
.vision-card:nth-child(2),
.dna-card:nth-child(2),
.country-card:nth-child(2),
.future-card:nth-child(2),
.stat-card:nth-child(2),
.partnership-card:nth-child(2){

    animation-delay:

        -2s;

}


.mission-card:nth-child(3),
.value-card:nth-child(3),
.vision-card:nth-child(3),
.dna-card:nth-child(3),
.country-card:nth-child(3),
.future-card:nth-child(3),
.stat-card:nth-child(3),
.partnership-card:nth-child(3){

    animation-delay:

        -4s;

}


.mission-card:nth-child(4),
.vision-card:nth-child(4),
.country-card:nth-child(4),
.stat-card:nth-child(4),
.partnership-card:nth-child(4){

    animation-delay:

        -6s;

}


/* =========================================================
   ANIMATION — VERY LOW AMPLITUDE
   ========================================================= */

@keyframes arsUltraSubtleFloat{


    0%,
    100%{

        transform:

            translateY(0);

    }


    50%{

        transform:

            translateY(-2px);

    }

}


/* =========================================================
   ENERGY PARTICLES MOTION
   ========================================================= */

@keyframes arsSubtleEnergy{


    0%,
    100%{

        transform:

            translate3d(0,0,0);

        opacity:

            .18;

    }


    50%{

        transform:

            translate3d(3px,-3px,0);

        opacity:

            .30;

    }

}


/* =========================================================
   HOVER STOPS FLOAT
   ========================================================= */

.mission-card:hover,
.value-card:hover,
.vision-card:hover,
.dna-card:hover,
.country-card:hover,
.future-card:hover,
.stat-card:hover,
.partnership-card:hover{


    animation-play-state:

        paused;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){


    .mission-card,
    .value-card,
    .vision-card,
    .dna-card,
    .country-card,
    .future-card,
    .stat-card,
    .partnership-card{


        animation:

            none;

    }


    .mission-card:hover,
    .value-card:hover,
    .vision-card:hover,
    .dna-card:hover,
    .country-card:hover,
    .future-card:hover,
    .stat-card:hover,
    .partnership-card:hover{


        transform:

            translateY(-3px);

    }

}


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

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


    .mission-card,
    .value-card,
    .vision-card,
    .dna-card,
    .country-card,
    .future-card,
    .stat-card,
    .partnership-card{


        animation:

            none !important;

        transition:

            none !important;

    }

}

/* =========================================================
   ARS PARTNERSHIP — FINAL MASTER OVERRIDE
   LAST CSS TEST
   ---------------------------------------------------------
   TARGETS:
   • ORIGINAL 2×2 NODE POSITION
   • CENTRAL ARS CORE
   • CORE HALO / LIGHT / ORBITS
   • PRIMARY ENERGY BRIDGES
   • SECONDARY ENERGY LINKS
   • NODE ENERGY
   • AMBIENT FIELD
   • ORBITAL PARTICLES
   • FINAL ENERGY
   ---------------------------------------------------------
   NO HTML CHANGE
   NO TYPOGRAPHY CHANGE
   ========================================================= */


/* =========================================================
   01 — NETWORK MASTER
   ========================================================= */

.partnership-network{
    position:relative !important;

    width:min(1180px,100%) !important;

    height:clamp(720px,72vw,940px) !important;

    margin:0 auto !important;

    overflow:visible !important;

    isolation:isolate !important;
}


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

.partnership-core{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

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

    z-index:30 !important;

    overflow:visible !important;
}


/* =========================================================
   03 — CORE ENERGY SYSTEM
   ========================================================= */

.partnership-core-energy{
    position:absolute !important;

    inset:-25% !important;

    pointer-events:none !important;

    z-index:1 !important;
}


/* =========================================================
   04 — CORE HALO
   ========================================================= */

.partnership-core-halo{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:145% !important;
    height:145% !important;

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

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255,250,220,.22) 0%,
            rgba(255,241,184,.14) 18%,
            rgba(228,185,95,.09) 35%,
            rgba(184,137,63,.035) 54%,
            transparent 74%
        ) !important;

    filter:blur(20px) !important;

    opacity:1 !important;

    pointer-events:none !important;

    z-index:1 !important;
}


/* =========================================================
   05 — CORE LIGHT
   ========================================================= */

.partnership-core-light{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:70% !important;
    height:70% !important;

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

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255,255,245,.42) 0%,
            rgba(255,241,184,.24) 20%,
            rgba(228,185,95,.12) 42%,
            transparent 72%
        ) !important;

    filter:blur(12px) !important;

    opacity:1 !important;

    z-index:3 !important;

    pointer-events:none !important;
}


/* =========================================================
   06 — CORE ORBITS
   ========================================================= */

.partnership-core-orbit{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

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

    border-radius:50% !important;

    pointer-events:none !important;

    border-color:
        rgba(228,185,95,.38) !important;

    box-shadow:
        0 0 8px rgba(228,185,95,.14),
        0 0 20px rgba(184,137,63,.08) !important;

    z-index:4 !important;
}


/* =========================================================
   07 — ENERGY NETWORK
   ========================================================= */

.partnership-energy-network{

    position:absolute !important;

    inset:0 !important;

    z-index:20 !important;

    display:block !important;

    pointer-events:none !important;

    overflow:visible !important;
}


/* =========================================================
   08 — PRIMARY BRIDGES
   ========================================================= */

.partnership-energy-bridge{

    position:absolute !important;

    display:block !important;

    height:2px !important;

    pointer-events:none !important;

    opacity:1 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,137,63,.18),
            rgba(228,185,95,.65),
            rgba(255,241,184,.95),
            rgba(228,185,95,.55),
            transparent
        ) !important;

    box-shadow:
        0 0 6px rgba(228,185,95,.55),
        0 0 18px rgba(228,185,95,.24),
        0 0 35px rgba(184,137,63,.12) !important;

    transform-origin:left center !important;
}


/* Energy travelling through bridge */

.partnership-energy-bridge i{

    position:absolute !important;

    left:0 !important;
    top:50% !important;

    width:9px !important;
    height:9px !important;

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

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            rgba(255,250,220,.95) 28%,
            rgba(255,241,184,.75) 55%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px #fff,
        0 0 20px rgba(255,241,184,.95),
        0 0 38px rgba(228,185,95,.65) !important;

    opacity:1 !important;
}


/* =========================================================
   09 — SECONDARY LINKS
   ========================================================= */

.partnership-energy-link{

    position:absolute !important;

    display:block !important;

    pointer-events:none !important;

    height:1px !important;

    opacity:.8 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(228,185,95,.55),
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(228,185,95,.30),
        0 0 18px rgba(184,137,63,.12) !important;
}


/* =========================================================
   10 — NODE POSITIONS
   ORIGINAL 2 × 2 LOGIC
   ========================================================= */

.partnership-node{

    position:absolute !important;

    z-index:25 !important;

    overflow:visible !important;
}


/* TOP LEFT */

.partnership-node-01{

    left:4% !important;
    top:14% !important;
}


/* TOP RIGHT */

.partnership-node-02{

    right:4% !important;
    top:14% !important;
}


/* BOTTOM LEFT */

.partnership-node-03{

    left:4% !important;
    bottom:14% !important;
}


/* BOTTOM RIGHT */

.partnership-node-04{

    right:4% !important;
    bottom:14% !important;
}


/* =========================================================
   11 — NODE ENERGY
   ========================================================= */

.partnership-node-energy{

    position:absolute !important;

    top:24px !important;
    right:24px !important;

    width:58px !important;
    height:58px !important;

    z-index:8 !important;

    pointer-events:none !important;

    opacity:1 !important;
}


/* Rings */

.node-energy-ring{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

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

    border-radius:50% !important;

    border-color:
        rgba(228,185,95,.32) !important;

    box-shadow:
        0 0 8px rgba(228,185,95,.16),
        0 0 18px rgba(184,137,63,.08) !important;
}


/* Node core */

.node-energy-core{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:12px !important;
    height:12px !important;

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

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            rgba(255,241,184,.95) 30%,
            rgba(228,185,95,.62) 58%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px #fff,
        0 0 18px rgba(255,241,184,.95),
        0 0 34px rgba(228,185,95,.65),
        0 0 50px rgba(184,137,63,.25) !important;
}


/* =========================================================
   12 — AMBIENT FIELD
   ========================================================= */

.partnership-energy-field{

    position:absolute !important;

    inset:0 !important;

    z-index:2 !important;

    pointer-events:none !important;

    overflow:hidden !important;
}


.partnership-energy-dot{

    opacity:.8 !important;

    box-shadow:
        0 0 5px rgba(255,241,184,.8),
        0 0 15px rgba(228,185,95,.4) !important;
}


/* =========================================================
   13 — ORBITAL PARTICLES
   ========================================================= */

.partnership-orbital-particles{

    position:absolute !important;

    inset:0 !important;

    z-index:12 !important;

    pointer-events:none !important;
}


.partnership-particle{

    opacity:.75 !important;

    box-shadow:
        0 0 6px rgba(255,241,184,.8),
        0 0 16px rgba(228,185,95,.4) !important;
}


/* =========================================================
   14 — CORE PULSE
   ========================================================= */

.partnership-core-halo,
.partnership-core-light{

    animation:
        finalARSCoreEnergy
        5s ease-in-out
        infinite !important;
}


@keyframes finalARSCoreEnergy{

    0%,100%{
        opacity:.62;
    }

    50%{
        opacity:1;
    }
}


/* =========================================================
   15 — RESPONSIVE
   ========================================================= */

@media (max-width:900px){

    .partnership-network{

        height:820px !important;
    }

    .partnership-node-01{
        left:2% !important;
        top:10% !important;
    }

    .partnership-node-02{
        right:2% !important;
        top:10% !important;
    }

    .partnership-node-03{
        left:2% !important;
        bottom:10% !important;
    }

    .partnership-node-04{
        right:2% !important;
        bottom:10% !important;
    }

}


@media (max-width:600px){

    .partnership-network{

        height:900px !important;
    }

    .partnership-node-01{
        left:50% !important;
        top:5% !important;
        transform:translateX(-50%) !important;
    }

    .partnership-node-02{
        right:auto !important;
        left:50% !important;
        top:29% !important;
        transform:translateX(-50%) !important;
    }

    .partnership-node-03{
        left:50% !important;
        bottom:29% !important;
        transform:translateX(-50%) !important;
    }

    .partnership-node-04{
        right:auto !important;
        left:50% !important;
        bottom:5% !important;
        transform:translateX(-50%) !important;
    }

    .partnership-core-halo{
        width:135% !important;
        height:135% !important;
    }

    .partnership-core-light{
        width:65% !important;
        height:65% !important;
    }
           }
/* =========================================================
   PARTNERSHIP NETWORK — FINAL ENERGY BALANCE OVERRIDE
   TARGET:
   CORE + 4 ENERGY BRIDGES + 4 CARDS
   ========================================================= */


/* =========================================================
   01 — CENTRAL ARS CORE
   ========================================================= */

.partnership-core{

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

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(228,185,95,.28) 0%,
            rgba(184,137,63,.18) 28%,
            rgba(12,22,38,.94) 68%
        );

    border-color:
        rgba(228,185,95,.48);

    box-shadow:

        0 0 35px
        rgba(228,185,95,.28),

        0 0 85px
        rgba(184,137,63,.25),

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

        inset 0 0 55px
        rgba(228,185,95,.12);

}


/* Stronger Core halo */

.partnership-core-halo{

    opacity:1 !important;

    background:
        radial-gradient(
            circle,
            rgba(255,241,184,.34) 0%,
            rgba(228,185,95,.20) 28%,
            rgba(184,137,63,.10) 52%,
            transparent 76%
        ) !important;

    filter:blur(24px) !important;

    transform:scale(1.22);

}


/* Core light */

.partnership-core-light{

    opacity:1 !important;

    background:
        radial-gradient(
            circle,
            rgba(255,250,220,1) 0%,
            rgba(255,241,184,.95) 18%,
            rgba(228,185,95,.72) 42%,
            rgba(184,137,63,.28) 68%,
            transparent 100%
        ) !important;

    box-shadow:

        0 0 12px
        rgba(255,250,220,1),

        0 0 30px
        rgba(255,241,184,.95),

        0 0 65px
        rgba(228,185,95,.72),

        0 0 110px
        rgba(184,137,63,.38);

}


/* =========================================================
   02 — FOUR PRIMARY ENERGY BRIDGES
   CORE → CARDS
   ========================================================= */

.partnership-energy-bridge{

    opacity:1 !important;

    z-index:12 !important;

    filter:
        drop-shadow(
            0 0 5px
            rgba(255,241,184,.65)
        )
        drop-shadow(
            0 0 16px
            rgba(228,185,95,.48)
        );

}


/* Energy beam */

.partnership-energy-bridge::before{

    opacity:1 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(184,137,63,.35) 15%,
            rgba(228,185,95,.72) 42%,
            rgba(255,241,184,1) 50%,
            rgba(228,185,95,.72) 58%,
            rgba(184,137,63,.35) 85%,
            transparent 100%
        ) !important;

    box-shadow:

        0 0 8px
        rgba(255,241,184,.75),

        0 0 20px
        rgba(228,185,95,.58),

        0 0 38px
        rgba(184,137,63,.32);

}


/* Make the bridge visibly thicker */

.partnership-energy-bridge{

    height:8px !important;

}


/* Moving energy particle inside every bridge */

.partnership-energy-bridge i{

    display:block !important;

    width:18px !important;
    height:18px !important;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,235,1) 0%,
            rgba(255,241,184,.95) 28%,
            rgba(228,185,95,.65) 55%,
            transparent 100%
        );

    box-shadow:

        0 0 8px
        rgba(255,255,235,1),

        0 0 22px
        rgba(255,241,184,.95),

        0 0 42px
        rgba(228,185,95,.72);

}


/* =========================================================
   03 — CARD ENERGY
   APPROX. 2/3 OF CORE ENERGY
   ========================================================= */

.partnership-node{

    background:
        linear-gradient(
            145deg,
            rgba(30,43,62,.68),
            rgba(7,14,26,.86)
        ) !important;

    border-color:
        rgba(228,185,95,.28) !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,241,184,.055),

        0 0 22px
        rgba(184,137,63,.12),

        0 18px 55px
        rgba(0,0,0,.28);

}


/* Card atmospheric halo */

.partnership-node::before{

    opacity:.72 !important;

    background:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(228,185,95,.20) 0%,
            rgba(184,137,63,.12) 30%,
            rgba(184,137,63,.045) 52%,
            transparent 76%
        ) !important;

    filter:blur(25px) !important;

    transform:scale(.92);

}


/* Lower card energy */

.partnership-node::after{

    opacity:.62 !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,241,184,.18) 0%,
            rgba(228,185,95,.12) 25%,
            rgba(184,137,63,.055) 48%,
            transparent 75%
        ) !important;

    filter:blur(18px) !important;

}


/* =========================================================
   04 — CARD RADAR / NODE ENERGY
   ========================================================= */

.partnership-node-energy{

    opacity:1 !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(228,185,95,.55)
        )
        drop-shadow(
            0 0 20px
            rgba(184,137,63,.32)
        ) !important;

}


/* Radar rings */

.partnership-node-energy
.node-energy-ring{

    opacity:.95 !important;

    border-color:
        rgba(228,185,95,.42) !important;

    box-shadow:

        0 0 8px
        rgba(228,185,95,.22),

        0 0 18px
        rgba(184,137,63,.16);

}


/* Radar core */

.partnership-node-energy
.node-energy-core{

    width:13px !important;
    height:13px !important;

    opacity:1 !important;

    background:
        radial-gradient(
            circle,
            rgba(255,255,235,1) 0%,
            rgba(255,241,184,.98) 28%,
            rgba(228,185,95,.68) 55%,
            transparent 100%
        ) !important;

    box-shadow:

        0 0 8px
        rgba(255,255,235,1),

        0 0 20px
        rgba(255,241,184,.95),

        0 0 38px
        rgba(228,185,95,.68),

        0 0 58px
        rgba(184,137,63,.32) !important;

}


/* =========================================================
   05 — CARD POSITION
   SMALLER + SLIGHTLY FARTHER FROM CORE
   ========================================================= */

.partnership-node{

    transform:scale(.80);

}


/* Preserve hover / active interaction */

.partnership-node:hover{

    transform:scale(.86) !important;

}


/* =========================================================
   06 — ACTIVE CORE / CARD
   CLICKED ELEMENT RISES
   ========================================================= */

.partnership-core:focus,
.partnership-core.active{

    transform:
        translate(-50%,-50%)
        scale(1.5) !important;

    z-index:100 !important;

}


.partnership-node.active{

    transform:scale(1.5) !important;

    z-index:100 !important;

    box-shadow:

        0 0 35px
        rgba(228,185,95,.32),

        0 0 80px
        rgba(184,137,63,.22),

        inset 0 0 35px
        rgba(228,185,95,.10) !important;

}


/* =========================================================
   07 — EXTRA ENERGY PARTICLES
   ========================================================= */

.partnership-energy-network
::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(255,241,184,.16) 0 2px,
            transparent 4px
        );

    opacity:.8;

    animation:
        partnershipNetworkEnergyPulse
        4s ease-in-out
        infinite;

}


@keyframes partnershipNetworkEnergyPulse{

    0%,100%{
        opacity:.45;
        filter:blur(1px);
    }

    50%{
        opacity:1;
        filter:blur(0);
    }

}


/* =========================================================
   08 — RESPONSIVE
   ========================================================= */

@media (max-width:900px){

    .partnership-node{

        transform:scale(.80);

    }

    .partnership-energy-bridge{

        height:7px !important;

    }

}


@media (max-width:600px){

    .partnership-node{

        transform:scale(.80);

    }

    .partnership-energy-bridge{

        height:6px !important;

    }

           }
















.partnership-core.active{

    transform:
        translate(-50%,-50%)
        scale(1.5) !important;

    z-index:100 !important;
}


.partnership-node.active{

    transform:scale(1.5) !important;

    z-index:100 !important;

    box-shadow:
        0 0 35px rgba(228,185,95,.45),
        0 0 80px rgba(184,137,63,.30),
        inset 0 0 35px rgba(228,185,95,.14) !important;

}

.partnership-core{
    width:200px !important;
}

/* =========================================================
   PARTNERSHIP — 35% SMALLER CARDS
   ========================================================= */

.partnership-node{
    width:clamp(159px,16.25vw,215px) !important;
    min-height:clamp(133px,13vw,166px) !important;
}

/* =========================================================
   HERITAGE → HOME
   ========================================================= */

.heritage-home-return{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:80px auto 40px;
    position:relative;
    z-index:50;
}

.heritage-home-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;

    padding:16px 28px;

    border:1px solid rgba(228,185,95,.35);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(228,185,95,.10),
            rgba(8,15,28,.72)
        );

    color:#f4dfaa;
    text-decoration:none;

    font-size:12px;
    letter-spacing:2px;
    font-weight:600;

    box-shadow:
        0 0 18px rgba(228,185,95,.10),
        inset 0 1px 0 rgba(255,255,255,.06);

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

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.heritage-home-arrow{
    font-size:20px;
    line-height:1;
    transition:transform .35s ease;
}

.heritage-home-button:hover{
    transform:translateY(-3px);

    border-color:rgba(228,185,95,.72);

    box-shadow:
        0 0 25px rgba(228,185,95,.25),
        0 0 55px rgba(184,137,63,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.heritage-home-button:hover .heritage-home-arrow{
    transform:translateX(5px);
}

























/* =========================================================
   ARS HERITAGE GROUP
   FINAL COLOR DNA OVERRIDE
   MATTE BRONZE × ELECTRIC BLUE
   NO GEOMETRY / NO POSITION / NO SIZE CHANGES
   ========================================================= */

.ars-group-page{

    --ars-gold:#C9A45C;
    --ars-gold-light:#E8C39A;
    --ars-gold-deep:#8F603F;

    --ars-bronze:#B98255;
    --ars-bronze-light:#D39A6C;

    --ars-blue:#39BFFF;

    --ars-brown:#70472F;

    --ars-shadow-gold:rgba(185,130,85,.30);

    --ars-border:rgba(185,130,85,.24);

    --ars-glass:
    linear-gradient(
        135deg,
        rgba(185,130,85,.075),
        rgba(57,191,255,.025) 48%,
        rgba(255,255,255,.015)
    );
}


/* =========================================================
   MAIN HERITAGE HEADINGS
   ========================================================= */

.ars-group-page .section-label{
    color:#D39A6C !important;
}

.ars-group-page .section-header h2{
    color:#E8C39A !important;
    text-shadow:
        0 0 14px rgba(185,130,85,.18),
        0 0 30px rgba(57,191,255,.08) !important;
}


/* =========================================================
   HERO — BRONZE DOMINANT / BLUE ENERGY
   ========================================================= */

.ars-group-page .group-hero{
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(185,130,85,.14),
            transparent 14%
        ),
        radial-gradient(
            circle at 18% 30%,
            rgba(57,191,255,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 82% 65%,
            rgba(185,130,85,.06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #03070B,
            #06121B 55%,
            #03070B
        ) !important;
}


/* =========================================================
   HERO GRID
   ========================================================= */

.ars-group-page .hero-industrial-grid{
    background-image:
        linear-gradient(
            rgba(185,130,85,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(57,191,255,.065) 1px,
            transparent 1px
        ) !important;
}


/* =========================================================
   HERO CORE
   ========================================================= */

.ars-group-page .hero-energy-core{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            #E8C39A 5%,
            #B98255 12%,
            rgba(185,130,85,.35) 25%,
            rgba(57,191,255,.16) 45%,
            transparent 70%
        ) !important;

    filter:
        blur(1px)
        drop-shadow(
            0 0 35px rgba(185,130,85,.32)
        ) !important;
}

.ars-group-page .hero-energy-core::before{
    border-color:rgba(185,130,85,.34) !important;

    box-shadow:
        0 0 45px rgba(185,130,85,.18),
        inset 0 0 30px rgba(57,191,255,.14) !important;
}


/* =========================================================
   ORBITS
   ========================================================= */

.ars-group-page .energy-orbit{
    border-color:rgba(185,130,85,.20) !important;
}

.ars-group-page .orbit-b{
    border-color:rgba(57,191,255,.20) !important;
}

.ars-group-page .orbit-c{
    border-color:rgba(185,130,85,.13) !important;
}


/* =========================================================
   ENERGY LINES
   ========================================================= */

.ars-group-page .energy-line{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,130,85,.18),
            #B98255,
            rgba(57,191,255,.70),
            transparent
        ) !important;

    box-shadow:
        0 0 12px rgba(185,130,85,.30) !important;
}


/* =========================================================
   LOGO AURA
   ========================================================= */

.ars-group-page .group-logo-wrapper::before{
    background:
        radial-gradient(
            circle,
            rgba(185,130,85,.24),
            transparent 68%
        ) !important;
}

.ars-group-page .group-logo-wrapper::after{
    border-color:rgba(57,191,255,.24) !important;
}

.ars-group-page .group-logo{
    filter:
        drop-shadow(
            0 0 18px rgba(185,130,85,.48)
        )
        drop-shadow(
            0 0 55px rgba(57,191,255,.18)
        ) !important;
}


/* =========================================================
   GLASS — BRONZE + BLUE
   ========================================================= */

.ars-group-page .ars-glass{
    border-color:rgba(185,130,85,.24) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(232,195,154,.10),
        0 0 28px rgba(57,191,255,.045) !important;
}

.ars-group-page .ars-glass::before{
    background:
        linear-gradient(
            120deg,
            rgba(232,195,154,.09),
            transparent 28%,
            transparent 68%,
            rgba(57,191,255,.035)
        ) !important;
}


/* =========================================================
   BACKGROUND ATMOSPHERE
   ========================================================= */

.ars-group-page .group-background-glow{
    background:
        radial-gradient(
            circle,
            rgba(185,130,85,.075),
            rgba(57,191,255,.035) 35%,
            transparent 70%
        ) !important;
}


/* =========================================================
   PARTNERSHIP CORE
   ========================================================= */

.ars-group-page .partnership-core{
    border-color:rgba(185,130,85,.72) !important;

    box-shadow:
        0 0 25px rgba(185,130,85,.20),
        0 0 70px rgba(185,130,85,.10),
        inset 0 0 35px rgba(57,191,255,.06) !important;
}

.ars-group-page .partnership-core-label{
    color:rgba(232,195,154,.82) !important;
}

.ars-group-page .partnership-core h3{
    color:#E8C39A !important;
    text-shadow:
        0 0 18px rgba(185,130,85,.22),
        0 0 34px rgba(57,191,255,.08) !important;
}

.ars-group-page .partnership-core-title{
    color:#79DDFF !important;
}

.ars-group-page .partnership-core-subtitle{
    color:rgba(121,221,255,.68) !important;
}


/* =========================================================
   PARTNERSHIP ENERGY
   ========================================================= */

.ars-group-page .partnership-energy-bridge{
    background:
        linear-gradient(
            90deg,
            transparent,
            #B98255 28%,
            #E8C39A 48%,
            #39BFFF 72%,
            transparent
        ) !important;

    box-shadow:
        0 0 10px rgba(185,130,85,.24),
        0 0 24px rgba(57,191,255,.12) !important;
}

.ars-group-page .partnership-energy-bridge i{
    background:#79DDFF !important;

    box-shadow:
        0 0 7px #79DDFF,
        0 0 18px rgba(57,191,255,.75),
        0 0 34px rgba(185,130,85,.30) !important;
}

.ars-group-page .partnership-energy-link{
    box-shadow:
        0 0 8px rgba(185,130,85,.55),
        0 0 20px rgba(57,191,255,.28) !important;
}


/* =========================================================
   PARTNERSHIP NODES
   ========================================================= */

.ars-group-page .partnership-node{
    border-color:rgba(185,130,85,.34) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,25,30,.96),
            rgba(5,10,14,.97)
        ) !important;

    box-shadow:
        0 0 20px rgba(185,130,85,.10),
        0 0 38px rgba(57,191,255,.055),
        inset 0 1px 0 rgba(232,195,154,.10) !important;
}

.ars-group-page .partnership-node h3{
    color:#E8C39A !important;
}

.ars-group-page .partnership-node p{
    color:rgba(217,214,207,.68) !important;
}

.ars-group-page .partnership-node::before{
    background:
        radial-gradient(
            circle at center,
            rgba(185,130,85,.075),
            rgba(57,191,255,.025) 38%,
            transparent 70%
        ) !important;
}


/* =========================================================
   GOLD = MICRO HIGHLIGHT ONLY
   ========================================================= */

.ars-group-page .eco-node-index,
.ars-group-page .partnership-node-status{
    color:#C9A45C !important;
           }





















/* =========================================================
   ARS HERITAGE GROUP
   ELECTRIC BLUE PRESENCE BOOST
   TARGET: ~30–35% VISUAL DNA
   NO GEOMETRY CHANGES
   ========================================================= */

.ars-group-page{

    --ars-blue:#39BFFF;
    --ars-blue-bright:#79DDFF;
    --ars-blue-deep:#168CFF;

    --ars-blue-glow:
        rgba(57,191,255,.32);

}


/* =========================================================
   GLOBAL BLUE ATMOSPHERE
   ========================================================= */

.ars-group-page::before{
    background:
        radial-gradient(
            ellipse at 18% 28%,
            rgba(57,191,255,.075),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 82% 62%,
            rgba(57,191,255,.065),
            transparent 36%
        ),
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.025),
            transparent
        ) !important;
}


/* =========================================================
   HERO — BLUE BECOMES A REAL SECONDARY COLOR
   ========================================================= */

.ars-group-page .group-hero{
    background:
        radial-gradient(
            circle at 18% 30%,
            rgba(57,191,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 65%,
            rgba(57,191,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 48%,
            rgba(185,130,85,.14),
            transparent 16%
        ),
        linear-gradient(
            180deg,
            #03070B,
            #06121B 55%,
            #03070B
        ) !important;
}


/* =========================================================
   INDUSTRIAL GRID
   ========================================================= */

.ars-group-page .hero-industrial-grid{
    opacity:.28 !important;

    background-image:
        linear-gradient(
            rgba(185,130,85,.065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(57,191,255,.13) 1px,
            transparent 1px
        ) !important;
}


/* =========================================================
   HERO CORE — BRONZE + BLUE BALANCE
   ========================================================= */

.ars-group-page .hero-energy-core{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            #E8C39A 5%,
            #B98255 12%,
            rgba(185,130,85,.32) 24%,
            rgba(57,191,255,.25) 42%,
            rgba(22,140,255,.12) 55%,
            transparent 72%
        ) !important;
}


/* =========================================================
   ORBITAL SYSTEM
   ========================================================= */

.ars-group-page .orbit-a{
    border-color:rgba(185,130,85,.22) !important;
}

.ars-group-page .orbit-b{
    border-color:rgba(57,191,255,.32) !important;
}

.ars-group-page .orbit-c{
    border-color:rgba(57,191,255,.20) !important;
}


/* =========================================================
   ENERGY LINES — BLUE MUCH MORE VISIBLE
   ========================================================= */

.ars-group-page .energy-line{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,130,85,.16),
            #B98255 30%,
            #E8C39A 43%,
            #39BFFF 62%,
            #79DDFF 76%,
            transparent
        ) !important;

    box-shadow:
        0 0 10px rgba(185,130,85,.22),
        0 0 18px rgba(57,191,255,.28),
        0 0 34px rgba(57,191,255,.12) !important;
}


/* =========================================================
   LOGO — BLUE SECONDARY AURA
   ========================================================= */

.ars-group-page .group-logo-wrapper::before{
    background:
        radial-gradient(
            circle at 42% 48%,
            rgba(185,130,85,.22),
            rgba(57,191,255,.12) 38%,
            transparent 70%
        ) !important;
}

.ars-group-page .group-logo-wrapper::after{
    border-color:rgba(57,191,255,.30) !important;
}

.ars-group-page .group-logo{
    filter:
        drop-shadow(
            0 0 18px rgba(185,130,85,.42)
        )
        drop-shadow(
            0 0 30px rgba(57,191,255,.24)
        )
        drop-shadow(
            0 0 65px rgba(57,191,255,.13)
        ) !important;
}


/* =========================================================
   GLASS — BLUE ENTERS THE MATERIAL
   ========================================================= */

.ars-group-page .ars-glass{
    border-color:
        rgba(185,130,85,.25) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.75),
        0 0 22px rgba(57,191,255,.065),
        inset 0 1px 0 rgba(232,195,154,.10),
        inset 0 0 35px rgba(57,191,255,.025) !important;
}

.ars-group-page .ars-glass::before{
    background:
        linear-gradient(
            120deg,
            rgba(232,195,154,.075),
            transparent 25%,
            transparent 55%,
            rgba(57,191,255,.055),
            transparent 82%
        ) !important;
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.ars-group-page .section-label{
    color:#D39A6C !important;
}

.ars-group-page .section-header h2{
    background:
        linear-gradient(
            90deg,
            #E8C39A 0%,
            #B98255 42%,
            #79DDFF 72%,
            #39BFFF 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 18px rgba(185,130,85,.16),
        0 0 32px rgba(57,191,255,.10) !important;
}


/* =========================================================
   PARTNERSHIP CORE
   ========================================================= */

.ars-group-page .partnership-core{
    background:
        radial-gradient(
            circle at 42% 42%,
            rgba(185,130,85,.18),
            rgba(57,191,255,.12) 38%,
            rgba(5,12,18,.94) 72%
        ) !important;

    border-color:
        rgba(57,191,255,.52) !important;

    box-shadow:
        0 0 25px rgba(185,130,85,.18),
        0 0 50px rgba(57,191,255,.20),
        0 0 95px rgba(57,191,255,.09),
        inset 0 0 35px rgba(57,191,255,.07) !important;
}

.ars-group-page .partnership-core h3{
    color:#E8C39A !important;

    text-shadow:
        0 0 14px rgba(185,130,85,.20),
        0 0 28px rgba(57,191,255,.18) !important;
}

.ars-group-page .partnership-core-title{
    color:#79DDFF !important;

    text-shadow:
        0 0 10px rgba(57,191,255,.35) !important;
}


/* =========================================================
   PARTNERSHIP NETWORK
   ========================================================= */

.ars-group-page .partnership-energy-bridge{
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(185,130,85,.65) 25%,
            #B98255 38%,
            #39BFFF 58%,
            #79DDFF 72%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 10px rgba(185,130,85,.20),
        0 0 20px rgba(57,191,255,.30),
        0 0 42px rgba(57,191,255,.12) !important;
}

.ars-group-page .partnership-energy-link{
    background:
        linear-gradient(
            90deg,
            rgba(57,191,255,.10),
            rgba(57,191,255,.70),
            rgba(185,130,85,.35)
        ) !important;

    box-shadow:
        0 0 9px rgba(57,191,255,.45),
        0 0 22px rgba(57,191,255,.20) !important;
}

.ars-group-page .partnership-energy-bridge i{
    background:#79DDFF !important;

    box-shadow:
        0 0 7px #79DDFF,
        0 0 18px rgba(57,191,255,.85),
        0 0 36px rgba(57,191,255,.38) !important;
}


/* =========================================================
   PARTNERSHIP NODES
   ========================================================= */

.ars-group-page .partnership-node{
    border-color:
        rgba(57,191,255,.32) !important;

    background:
        linear-gradient(
            145deg,
            rgba(16,29,39,.96),
            rgba(5,12,18,.97)
        ) !important;

    box-shadow:
        0 0 18px rgba(57,191,255,.10),
        0 0 36px rgba(185,130,85,.07),
        inset 0 1px 0 rgba(121,221,255,.10),
        inset 0 0 25px rgba(57,191,255,.035) !important;
}

.ars-group-page .partnership-node h3{
    color:#E8C39A !important;
}

.ars-group-page .partnership-node p{
    color:rgba(121,221,255,.66) !important;
}

.ars-group-page .partnership-node:hover{
    border-color:
        rgba(121,221,255,.65) !important;

    box-shadow:
        0 0 22px rgba(57,191,255,.20),
        0 0 48px rgba(57,191,255,.10),
        0 0 65px rgba(185,130,85,.08) !important;
}


/* =========================================================
   BLUE PARTICLES / SIGNAL POINTS
   ========================================================= */

.ars-group-page .partnership-energy-dot,
.ars-group-page .partnership-particle{
    background:#39BFFF !important;

    box-shadow:
        0 0 6px #39BFFF,
        0 0 15px rgba(57,191,255,.75),
        0 0 30px rgba(57,191,255,.32) !important;
}


















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

















/* =========================================================
   ARS HERITAGE GROUP
   PARTNERSHIP NETWORK
   FINAL COLOR DNA
   60% LUXURY GOLD × 40% ELECTRIC BLUE
   GEOMETRY / SIZE / POSITION / ANIMATION = UNCHANGED
   ========================================================= */

.ars-group-page .partnership-core{
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,241,184,.20) 0%,
            rgba(201,164,92,.12) 24%,
            rgba(57,191,255,.10) 48%,
            transparent 68%
        ),
        linear-gradient(
            145deg,
            rgba(18,38,54,.62),
            rgba(6,16,25,.76)
        ) !important;

    border-color:rgba(228,189,104,.58) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,244,207,.10),
        0 0 0 1px rgba(57,191,255,.08),
        0 0 38px rgba(228,189,104,.24),
        0 0 75px rgba(201,164,92,.16),
        0 0 115px rgba(57,191,255,.14),
        0 0 170px rgba(57,191,255,.07) !important;
}


/* CENTRAL CORE ENERGY */
.ars-group-page .partnership-core-energy{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(228,189,104,.16) 0%,
            rgba(57,191,255,.11) 42%,
            transparent 72%
        ) !important;
}


/* CORE ORBITS — GOLD PRIMARY / BLUE SECONDARY */
.ars-group-page .partnership-core-orbit{
    border-color:rgba(228,189,104,.34) !important;
}

.ars-group-page .partnership-core-orbit::after{
    background:rgba(255,244,207,.98) !important;

    box-shadow:
        0 0 7px rgba(255,244,207,1),
        0 0 15px rgba(228,189,104,.92),
        0 0 26px rgba(57,191,255,.55) !important;
}

.ars-group-page .partnership-core .orbit-middle{
    border-color:rgba(57,191,255,.32) !important;
}

.ars-group-page .partnership-core .orbit-inner{
    border-color:rgba(201,164,92,.24) !important;
}


/* CORE HALO — MIXED GOLD + ELECTRIC BLUE */
.ars-group-page .partnership-core-halo{
    background:
        radial-gradient(
            circle,
            rgba(228,189,104,.22) 0%,
            rgba(201,164,92,.13) 28%,
            rgba(57,191,255,.13) 52%,
            transparent 72%
        ) !important;

    filter:blur(6px);
}


/* CORE LIGHT */
.ars-group-page .partnership-core-light{
    background:
        radial-gradient(
            circle,
            rgba(255,248,220,.90) 0%,
            rgba(228,189,104,.42) 28%,
            rgba(57,191,255,.24) 52%,
            transparent 74%
        ) !important;

    box-shadow:
        0 0 12px rgba(255,244,207,.55),
        0 0 30px rgba(228,189,104,.28),
        0 0 48px rgba(57,191,255,.20) !important;
}


/* CORE TEXT */
.ars-group-page .partnership-core-label{
    color:rgba(228,189,104,.82) !important;
}

.ars-group-page .partnership-core h3{
    color:rgba(255,248,230,.98) !important;

    text-shadow:
        0 0 12px rgba(228,189,104,.20),
        0 0 26px rgba(57,191,255,.10) !important;
}

.ars-group-page .partnership-core-title{
    color:rgba(228,189,104,.92) !important;
}

.ars-group-page .partnership-core-subtitle{
    color:rgba(121,221,255,.72) !important;
}


/* =========================================================
   MAIN ENERGY BRIDGES
   GOLD 60 / BLUE 40
   ========================================================= */

.ars-group-page .partnership-energy-bridge{
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(57,191,255,.08) 10%,
            rgba(201,164,92,.28) 28%,
            rgba(228,189,104,.68) 42%,
            rgba(255,244,207,.92) 50%,
            rgba(57,191,255,.62) 62%,
            rgba(57,191,255,.34) 76%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 9px rgba(228,189,104,.26),
        0 0 20px rgba(201,164,92,.14),
        0 0 34px rgba(57,191,255,.16) !important;
}


/* MOVING ENERGY */
.ars-group-page .partnership-energy-bridge i{
    background:
        radial-gradient(
            ellipse,
            rgba(255,250,225,1) 0%,
            rgba(228,189,104,.95) 28%,
            rgba(57,191,255,.78) 58%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(255,244,207,1),
        0 0 16px rgba(228,189,104,.88),
        0 0 28px rgba(57,191,255,.62) !important;
}


/* SECONDARY ENERGY NODES */
.ars-group-page .partnership-energy-link{
    background:rgba(255,244,207,.96) !important;

    box-shadow:
        0 0 8px rgba(255,244,207,.92),
        0 0 17px rgba(228,189,104,.72),
        0 0 30px rgba(57,191,255,.48) !important;
}


/* =========================================================
   PARTNERSHIP CARDS
   GOLD PRIMARY / BLUE SERIOUS PRESENCE
   ========================================================= */

.ars-group-page .partnership-node{
    background:
        linear-gradient(
            145deg,
            rgba(22,42,57,.38),
            rgba(7,16,25,.52)
        ) !important;

    border-color:rgba(201,164,92,.30) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,244,207,.055),
        0 18px 50px rgba(0,0,0,.20),
        0 0 24px rgba(201,164,92,.10),
        0 0 42px rgba(57,191,255,.07) !important;
}


/* CARD ENERGY BACKLIGHT */
.ars-group-page .partnership-node::before{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(228,189,104,.10) 0%,
            rgba(201,164,92,.045) 30%,
            rgba(57,191,255,.075) 52%,
            transparent 72%
        ) !important;
}


/* CARD ENERGY RINGS */
.ars-group-page .node-energy-ring{
    border-color:rgba(228,189,104,.30) !important;
}

.ars-group-page .node-energy-ring::after{
    background:rgba(255,244,207,.95) !important;

    box-shadow:
        0 0 8px rgba(255,244,207,.95),
        0 0 17px rgba(228,189,104,.75),
        0 0 27px rgba(57,191,255,.48) !important;
}


/* CARD TEXT */
.ars-group-page .partnership-node-index{
    color:rgba(57,191,255,.68) !important;
}

.ars-group-page .partnership-node-category{
    color:rgba(228,189,104,.78) !important;
}

.ars-group-page .partnership-node h3{
    color:rgba(255,248,235,.96) !important;
}

.ars-group-page .partnership-node p{
    color:rgba(225,235,241,.76) !important;
}

.ars-group-page .partnership-node-status{
    color:rgba(121,221,255,.62) !important;
}


/* CARD BOTTOM SIGNAL */
.ars-group-page .partnership-node::after{
    background:
        linear-gradient(
            90deg,
            rgba(201,164,92,.85),
            rgba(228,189,104,.65),
            rgba(57,191,255,.72),
            transparent
        ) !important;

    box-shadow:
        0 0 9px rgba(228,189,104,.20),
        0 0 18px rgba(57,191,255,.12) !important;
}


/* HOVER — KEEP ORIGINAL GEOMETRY */
.ars-group-page .partnership-node:hover{
    border-color:rgba(228,189,104,.52) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.24),
        0 0 30px rgba(228,189,104,.18),
        0 0 48px rgba(57,191,255,.12) !important;
}




















/* =========================================================
   ARS ECOSYSTEM — 9 NODE ELECTRIC BLUE BACKLIGHT
   GOLD / BRONZE PRESERVED
   NO GEOMETRY CHANGE
   ========================================================= */

.ars-group-page .ecosystem-intro{
    position:relative;
    isolation:isolate;
}

/* ---------------------------------------------------------
   GLOBAL BLUE ATMOSPHERE BEHIND THE 9-NODE SYSTEM
   --------------------------------------------------------- */

.ars-group-page .ecosystem-intro::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:1050px;
    height:1050px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    z-index:-5;

    background:
        radial-gradient(
            circle at center,
            rgba(57,191,255,.14) 0%,
            rgba(57,191,255,.085) 22%,
            rgba(57,191,255,.045) 42%,
            rgba(22,169,255,.025) 58%,
            transparent 76%
        );

    filter:blur(32px);
    opacity:.9;
}


/* =========================================================
   9 NODES
   Blue becomes a BACK-SHADOW.
   Existing gold / bronze lighting remains.
   ========================================================= */

.ars-group-page .ecosystem-node{
    position:relative;
    isolation:isolate;

    box-shadow:
        /* ELECTRIC BLUE BACKLIGHT */
        0 0 18px rgba(57,191,255,.18),
        0 0 42px rgba(57,191,255,.12),
        0 0 82px rgba(57,191,255,.075),

        /* EXISTING DEPTH */
        0 20px 55px rgba(0,0,0,.30),

        /* BLUE TOP EDGE */
        inset 0 1px 0 rgba(121,221,255,.14) !important;
}


/* BLUE AURA DIRECTLY BEHIND EACH NODE */

.ars-group-page .ecosystem-node::before{
    content:"";
    position:absolute;

    left:-25%;
    top:-32%;
    width:150%;
    height:165%;

    border-radius:50%;
    pointer-events:none;
    z-index:-1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(57,191,255,.20) 0%,
            rgba(57,191,255,.115) 28%,
            rgba(22,169,255,.060) 48%,
            rgba(57,191,255,.025) 62%,
            transparent 75%
        );

    filter:blur(25px);
    opacity:.82;
}


/* THIN ELECTRIC-BLUE ENERGY EDGE */

.ars-group-page .ecosystem-node::after{
    content:"";
    position:absolute;

    left:10%;
    right:10%;
    bottom:0;

    height:1px;
    pointer-events:none;
    z-index:2;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,191,255,.55),
            rgba(121,221,255,.92),
            rgba(57,191,255,.55),
            transparent
        );

    box-shadow:
        0 0 8px rgba(57,191,255,.48),
        0 0 20px rgba(57,191,255,.22);

    opacity:.78;
}


/* =========================================================
   CENTRAL ARS INTELLIGENCE CORE
   ========================================================= */

.ars-group-page .ecosystem-core{
    position:relative;
    isolation:isolate;

    box-shadow:
        0 0 20px rgba(57,191,255,.24),
        0 0 48px rgba(57,191,255,.17),
        0 0 95px rgba(57,191,255,.10) !important;
}


/* LARGE BLUE HALO BEHIND CENTRAL CORE */

.ars-group-page .ecosystem-core-halo{
    background:
        radial-gradient(
            circle,
            rgba(57,191,255,.30) 0%,
            rgba(57,191,255,.19) 20%,
            rgba(22,169,255,.105) 40%,
            rgba(57,191,255,.045) 60%,
            transparent 77%
        ) !important;

    filter:blur(20px) !important;

    box-shadow:
        0 0 45px rgba(57,191,255,.25),
        0 0 95px rgba(57,191,255,.17),
        0 0 160px rgba(57,191,255,.09) !important;
}


/* BLUE DEPTH AROUND CENTRAL FRAME */

.ars-group-page .ecosystem-core-frame{
    box-shadow:
        0 0 18px rgba(57,191,255,.22),
        0 0 42px rgba(57,191,255,.14),
        0 0 78px rgba(57,191,255,.075),
        inset 0 0 30px rgba(57,191,255,.045) !important;
}


/* CENTRAL BLUE CORE PULSE */

.ars-group-page .ecosystem-core-pulse{
    box-shadow:
        0 0 10px rgba(121,221,255,.90),
        0 0 25px rgba(57,191,255,.72),
        0 0 52px rgba(57,191,255,.45),
        0 0 95px rgba(57,191,255,.22) !important;
}


/* =========================================================
   CONNECTION NETWORK
   GOLD / BRONZE LINES STAY.
   BLUE IS ADDED ONLY AS SECONDARY GLOW.
   ========================================================= */

.ars-group-page .ecosystem-line{
    filter:
        drop-shadow(0 0 4px rgba(57,191,255,.32))
        drop-shadow(0 0 11px rgba(57,191,255,.17));
}


/* MOVING DATA POINTS */

.ars-group-page .ecosystem-data-pulse{
    fill:#79DDFF !important;

    filter:
        drop-shadow(0 0 5px rgba(121,221,255,.95))
        drop-shadow(0 0 14px rgba(57,191,255,.78))
        drop-shadow(0 0 28px rgba(57,191,255,.40));
}


/* KEEP CENTRAL CONTENT ABOVE BLUE LIGHT */

.ars-group-page .ecosystem-core-orbit,
.ars-group-page .ecosystem-core-frame,
.ars-group-page .ecosystem-core-inner{
    position:relative;
    z-index:2;
}

























































/* =========================================================
   ARS HERITAGE GROUP
   SHOW FULL IMAGES INSIDE THEIR FRAMES
   ========================================================= */

.ars-group-page img {
    object-fit: contain !important;
    object-position: center center !important;
}


/* Keep image inside its existing frame */

.ars-group-page .ars-glass img,
.ars-group-page .ecosystem-intro img,
.ars-group-page .partnership-node img,
.ars-group-page .partnership-core img,
.ars-group-page .hero-visual img,
.ars-group-page .group-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}


/* Do not allow the image itself to escape its frame */

.ars-group-page .ars-glass,
.ars-group-page .hero-visual,
.ars-group-page .ecosystem-node,
.ars-group-page .partnership-node,
.ars-group-page .partnership-core {
    overflow: hidden;
}























/* =========================================================
   ARS HERITAGE GROUP — HERO TITLE
   SMALLER + MATTE BRONZE
   ========================================================= */

.ars-group-page .group-hero h1 {
    font-size: clamp(2.2rem, 4.8vw, 4.2rem) !important;
    line-height: 1 !important;

    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    color: #B98255 !important;

    text-shadow:
        0 0 8px rgba(185,130,85,.20),
        0 0 20px rgba(185,130,85,.10),
        0 0 32px rgba(57,191,255,.06) !important;

    animation: none !important;
}

















/* =========================================================
   ARS FOOTER — FULL WIDTH CINEMATIC BACKGROUND
========================================================= */

.ars-footer {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    min-height: 520px !important;
}

.ars-footer .footer-background {
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;
    overflow: hidden !important;
}

.ars-footer .footer-background img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.ars-footer .footer-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,7,11,.94) 0%,
            rgba(3,7,11,.78) 32%,
            rgba(3,7,11,.48) 62%,
            rgba(3,7,11,.72) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3,7,11,.28) 0%,
            rgba(3,7,11,.10) 45%,
            rgba(3,7,11,.82) 100%
        );
}

.ars-footer .footer-content {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width:700px) {

    .ars-footer {
        min-height: 620px !important;
    }

    .ars-footer .footer-background img {
        object-position: center center !important;
    }

    .ars-footer .footer-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3,7,11,.72) 0%,
                rgba(3,7,11,.42) 42%,
                rgba(3,7,11,.90) 100%
            );
    }
}