/* =======================================================
VIBRATIX V2
LAYOUT.CSS
======================================================= */

/* =======================================================
CONTAINERS
======================================================= */

.container{


width:min(
    var(--container-lg),
    92%
);

margin-inline:auto;


}

.narrow{


max-width:900px;

margin-inline:auto;


}

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

#main-header{


position:fixed;

top:0;
left:0;

width:100%;

z-index:var(--z-header);

backdrop-filter:
blur(20px);

background:
rgba(5,5,5,.35);

border-bottom:
1px solid rgba(255,255,255,.03);


}

.navbar{


min-height:80px;

display:flex;

align-items:center;

justify-content:space-between;


}

.logo-main{


font-family:
var(--font-title);

color:
var(--gold);

letter-spacing:
6px;

font-size:
clamp(
    1rem,
    2vw,
    1.5rem
);


}

.nav-links{


display:flex;

align-items:center;

gap:2rem;


}

.nav-links a{


color:
var(--muted);

transition:
var(--transition-fast);


}

.nav-links a:hover{


color:
var(--gold);


}

.menu-toggle{


display:none;


}

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

#hero{


min-height:100vh;

display:flex;

align-items:center;

justify-content:center;


}

.hero-container{


display:grid;

gap:3rem;


}

.hero-content{


text-align:center;

max-width:1000px;

margin:auto;


}

.hero-tag{


display:inline-flex;

align-items:center;

justify-content:center;

padding:
.75rem 1.5rem;

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

border-radius:
999px;

color:
var(--gold);

letter-spacing:
2px;

font-size:
.8rem;

margin-bottom:
2rem;

backdrop-filter:
blur(10px);


}

.hero-title{


font-size:
var(--hero-title);

margin-bottom:
1rem;


}

.hero-subtitle{


font-size:
var(--hero-subtitle);

color:
var(--gold);

margin-bottom:
2rem;


}

.hero-description{


max-width:800px;

margin-inline:auto;

color:
var(--muted);

font-size:
var(--text-lg);

margin-bottom:
3rem;


}

.hero-actions{


display:flex;

justify-content:center;

gap:1rem;

flex-wrap:wrap;


}

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

.section-header{


margin-bottom:5rem;


}

.section-header.center{


text-align:center;


}

.section-tag{


display:inline-flex;

align-items:center;

justify-content:center;

padding:
.75rem 1.5rem;

border-radius:
999px;

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

color:
var(--gold);

letter-spacing:
2px;

font-size:
.8rem;

margin-bottom:
1.5rem;


}

.section-title{


font-size:
var(--section-title);

max-width:
1100px;

margin-inline:auto;


}

.section-description{


max-width:
800px;

margin:
2rem auto 0;

color:
var(--muted);


}

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

.cards-grid{


display:grid;

grid-template-columns:

repeat(
    auto-fit,
    minmax(
        320px,
        1fr
    )
);

gap:2rem;


}

/* =======================================================
CAPABILITIES
======================================================= */

.capabilities-grid{


display:grid;

grid-template-columns:

repeat(
    auto-fit,
    minmax(
        280px,
        1fr
    )
);

gap:2rem;


}

/* =======================================================
ARCHITECTURE
======================================================= */

.architecture-stage{


width:100%;

display:flex;

justify-content:center;

align-items:center;

min-height:700px;


}

#orbital-system{


width:min(
    90vw,
    1000px
);

height:min(
    90vw,
    1000px
);

position:relative;


}

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

.timeline{


display:grid;

gap:2rem;


}

.timeline-item{


padding:
2rem;

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

border-radius:
var(--radius-lg);

backdrop-filter:
blur(15px);

background:
var(--glass);


}

.timeline-item span{


display:inline-block;

color:
var(--gold);

font-size:
2rem;

margin-bottom:
1rem;


}

/* =======================================================
FORM
======================================================= */

.access-form{


display:grid;

gap:1.25rem;


}

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

footer{


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

padding:
3rem 0;

text-align:center;


}

footer p{


color:
var(--muted);


}

footer p + p{


margin-top:
.5rem;


}

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

@media (max-width:992px){


.nav-links{

    gap:1.25rem;

}


}

@media (max-width:768px){


.nav-links{

    display:none;

}

.menu-toggle{

    display:block;

    color:
    white;

    font-size:
    1.5rem;

}

.hero-actions{

    flex-direction:column;

    align-items:center;

}

.hero-actions a{

    width:100%;

    max-width:320px;

}

.architecture-stage{

    min-height:500px;

}


}

@media (max-width:576px){


.container{

    width:94%;

}

.cards-grid{

    grid-template-columns:
    1fr;

}

.capabilities-grid{

    grid-template-columns:
    1fr;

}


}