.hero{

min-height:100vh;

display:flex;
align-items:center;

padding:0 8%;

position:relative;

overflow:hidden;

background:
linear-gradient(to right,#0A0F14,#071018,#050C12);

}

/* GRID BACKGROUND */

.hero-bg-grid{

position:absolute;
inset:0;

background-image:

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

background-size:120px 120px;

opacity:.25;

animation:gridDrift 30s linear infinite;

z-index:0;

}

/* GLOW */

.hero-glow{

position:absolute;

width:700px;
height:700px;

background:radial-gradient(circle, rgba(38,166,154,.25), transparent 70%);

top:40%;
left:30%;

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

filter:blur(60px);

pointer-events:none;

z-index:1;

}

/* CONTAINER */

.hero-container{

max-width:1200px;
margin:auto;
width:100%;

position:relative;
z-index:2;

}

/* GRID */

.hero-grid{

display:grid;
grid-template-columns:60% 40%;
gap:80px;

align-items:center;

}

/* LEFT */

.hero-eyebrow{

font-size:.7rem;

letter-spacing:3px;

color:var(--accent);

display:block;

margin-bottom:18px;

}

.hero-left h1{

font-size:3rem;

line-height:1.1;

font-weight:400;

max-width:520px;

}

.accent{

color:var(--accent);
display:block;

margin-top:10px;

}

.hero-sub{

margin-top:20px;

color:var(--text-soft);

max-width:440px;

}

.hero-actions{

margin-top:40px;

display:flex;
gap:24px;

}

/* RIGHT */

.hero-depth{

transition:transform .15s ease-out;

}

/* SYSTEM */

.hero-system{

display:flex;
flex-direction:column;
gap:18px;

position:relative;
padding-left:40px;

}

.system-node{

padding:12px 18px;

border:1px solid var(--border-soft);
border-radius:10px;

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

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

opacity:.55;

transition:all .3s ease;

}

.system-node.active{

opacity:1;

border-color:var(--accent);

color:var(--accent);

box-shadow:0 0 12px rgba(38,166,154,.25);

transform:translateX(3px);

}

.system-node.highlight{

border-color:var(--accent);
color:var(--accent);

}

.system-arrow{

height:14px;
width:2px;

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

margin-left:6px;

}

/* SYSTEM LINE */

.system-line{

position:absolute;

left:10px;
top:0;
bottom:0;

width:2px;

background:linear-gradient(
to bottom,
transparent,
rgba(255,255,255,.08),
transparent
);

}

/* PARTICLES */

.system-particles{

position:absolute;
left:-3px;

width:8px;
height:100%;

}

.system-particles span{

position:absolute;

width:6px;
height:6px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 6px rgba(38,166,154,.8);

animation:dataParticle 4s linear infinite;

}

.system-particles span:nth-child(2){animation-delay:1s;}
.system-particles span:nth-child(3){animation-delay:2s;}
.system-particles span:nth-child(4){animation-delay:3s;}

.system-meta{

margin-top:10px;

font-size:.7rem;

color:var(--text-soft);

}

.system-meta strong{

display:block;

color:var(--accent);

font-size:1rem;

}

.hero-title .reveal{

display:inline-block;
margin-right:6px;

opacity:0;
transform:translateY(20px);

}

.hero-glow{

mix-blend-mode:screen;

}

.hero-left h1{

font-size:3rem;
line-height:1.15;

font-weight:400;

max-width:520px;

}

.system-node {
font-size: .85rem;
padding: 14px 20px;
}

.system-node.highlight{

border-color:var(--accent);
color:var(--accent);

box-shadow:0 0 16px rgba(38,166,154,.35);

}

.system-meta span{
font-size:.65rem;
opacity:.6;
letter-spacing:1px;
}

.system-meta strong{
font-size:.9rem;
}

.hero-eyebrow{
font-size:.65rem;
letter-spacing:3px;
color:var(--accent);
opacity:.85;
}

.hero-logo{

position:absolute;

top:40px;
left:8%;

height:80px;

opacity:.9;

z-index:5;

}

.hero-logo{

position:absolute;

top:40px;
left:8%;

height:80px;

opacity:.9;

z-index:5;

filter:drop-shadow(0 0 8px rgba(38,166,154,.25));

}

.hero-logo{

opacity:0;
animation:logoFade 1.2s ease forwards;

}

@keyframes logoFade{

to{
opacity:.9;
}

}