# /*

HERO SECTION
hero.css
========

*/

.hero-section{

```
position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:120px;
padding-bottom:80px;
```

}

/* =====================================
BACKGROUND GRID
===================================== */

.hero-grid-bg{

```
position:absolute;

inset:0;

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

background-size:60px 60px;

pointer-events:none;

z-index:1;
```

}

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

.hero-content{

```
position:relative;

z-index:5;

display:grid;

grid-template-columns:
1.2fr
0.8fr;

gap:60px;

align-items:center;
```

}

/* =====================================
LEFT SIDE
===================================== */

.hero-left{

```
max-width:760px;
```

}

.hero-badge{

```
display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:100px;

border:1px solid rgba(0,212,255,0.25);

background:
rgba(0,212,255,0.06);

color:var(--accent-blue);

font-size:13px;

font-weight:600;

letter-spacing:1px;

margin-bottom:30px;

text-transform:uppercase;
```

}

.hero-title{

```
font-size:5rem;

font-weight:800;

line-height:1;

margin-bottom:30px;

letter-spacing:-2px;
```

}

.hero-title span{

```
display:block;

color:var(--text-secondary);

margin-top:10px;
```

}

.hero-title span:hover{

```
color:var(--accent-blue);

transition:var(--transition-normal);
```

}

.hero-description{

```
max-width:700px;

font-size:1.1rem;

line-height:1.9;

margin-bottom:40px;
```

}

.hero-buttons{

```
display:flex;

gap:20px;

flex-wrap:wrap;
```

}

/* =====================================
RIGHT SIDE
===================================== */

.hero-right{

```
display:flex;

justify-content:center;
```

}

/* =====================================
COMMAND CENTER
===================================== */

.command-center-card{

```
width:100%;

max-width:520px;

padding:30px;

border-radius:24px;

border:1px solid rgba(255,255,255,0.08);

background:
rgba(17,24,39,0.60);

backdrop-filter:blur(18px);

box-shadow:
0 20px 60px rgba(0,0,0,0.40);
```

}

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

.command-header{

```
display:flex;

align-items:center;

gap:12px;

margin-bottom:30px;

color:var(--accent-blue);

font-weight:700;

letter-spacing:1px;
```

}

.status-dot{

```
width:10px;
height:10px;

border-radius:50%;

background:var(--accent-green);

animation:statusPulse 2s infinite;
```

}

/* =====================================
METRICS
===================================== */

.command-metrics{

```
display:grid;

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

gap:15px;

margin-bottom:30px;
```

}

.metric-card{

```
padding:20px;

border-radius:18px;

background:
rgba(255,255,255,0.03);

border:
1px solid rgba(255,255,255,0.05);
```

}

.metric-card h3{

```
color:var(--accent-blue);

font-size:2rem;

margin-bottom:8px;
```

}

.metric-card p{

```
font-size:14px;
```

}

/* =====================================
RESEARCH DOMAINS
===================================== */

.research-domains{

```
margin-bottom:30px;
```

}

.research-domains h4{

```
margin-bottom:15px;

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

}

.research-domains ul{

```
display:grid;

gap:10px;
```

}

.research-domains li{

```
position:relative;

padding-left:22px;

color:var(--text-secondary);
```

}

.research-domains li::before{

```
content:"";

position:absolute;

left:0;
top:9px;

width:8px;
height:8px;

border-radius:50%;

background:var(--accent-blue);
```

}

/* =====================================
FOOTER
===================================== */

.command-footer{

```
display:flex;

align-items:center;

gap:12px;

padding-top:20px;

border-top:
1px solid rgba(255,255,255,0.08);

color:var(--accent-green);

font-weight:600;
```

}

.pulse-indicator{

```
width:10px;
height:10px;

border-radius:50%;

background:var(--accent-green);

animation:statusPulse 2s infinite;
```

}

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

@keyframes statusPulse{

```
0%{

    box-shadow:
    0 0 0 0
    rgba(0,255,157,0.7);

}

70%{

    box-shadow:
    0 0 0 12px
    rgba(0,255,157,0);

}

100%{

    box-shadow:
    0 0 0 0
    rgba(0,255,157,0);

}
```

}

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

@media(max-width:1200px){

```
.hero-title{

    font-size:4rem;

}
```

}

@media(max-width:992px){

```
.hero-content{

    grid-template-columns:1fr;

}

.hero-right{

    margin-top:20px;

}
```

}

@media(max-width:768px){

```
.hero-section{

    padding-top:140px;

}

.hero-title{

    font-size:3rem;

}

.command-metrics{

    grid-template-columns:1fr;

}
```

}