/* HERO */

.hero{

padding:
120px 7vw
80px;
}

.section-eyebrow{

color:#00ff99;

letter-spacing:10px;

font-size:0.85rem;

margin-bottom:22px;
}

.hero-title{

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

line-height:1.05;

margin-bottom:28px;
}

.hero-description{

font-size:1.2rem;

line-height:1.8;

max-width:850px;

color:#d0d0d0;

margin-bottom:50px;
}

/* BUTTONS */

.hero-buttons{

display:flex;
flex-wrap:wrap;

gap:20px;
}

.primary-button,
.secondary-button{

padding:
22px 34px;

border-radius:22px;

font-size:1rem;

font-weight:700;

text-decoration:none;

transition:
0.25s;

display:flex;

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

.primary-button{

background:#00ff99;

color:black;

box-shadow:
0 0 20px rgba(0,255,153,0.25);
}

.primary-button:hover{

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

box-shadow:
0 0 35px rgba(0,255,153,0.45);
}

.secondary-button{

background:
rgba(0,0,0,0.72);

border:
1px solid rgba(0,255,153,0.12);

color:#00ff99;
}

.secondary-button:hover{

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

box-shadow:
0 0 35px rgba(0,255,153,0.2);
}

/* RUNTIME SHELL */

.runtime-shell{

margin:
0 7vw
100px;

padding:40px;

background:
rgba(0,0,0,0.72);

border:
1px solid rgba(0,255,153,0.12);

border-radius:30px;

backdrop-filter:blur(14px);
}

.shell-dots{

display:flex;

gap:12px;

margin-bottom:24px;
}

.shell-dots span{

width:18px;
height:18px;

border-radius:50%;

background:#00ff99;

box-shadow:
0 0 15px rgba(0,255,153,0.7);
}

.runtime-shell h2{

font-size:2rem;

color:#00ff99;

margin-bottom:24px;
}

#shell-text{

line-height:2;

font-size:1rem;

white-space:pre-wrap;

color:#d0d0d0;
}

/* MOBILE */

@media(max-width:768px){

.hero{
padding-top:90px;
}

.hero-buttons{
flex-direction:column;
}

.primary-button,
.secondary-button{
width:100%;
}

.hero-title{
font-size:4rem;
}

}