:root{
	--bg:#050505;
	--panel:#0e0e10;
	--accent-start:#e6e8ea;
	--accent-end:#9aa0a6;
	--muted:#9a9ea2;
	--glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}

html,body{
    height:100%
}
body{
	margin:0 20px;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background:var(--bg);
	color:#e9e9e9;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
    background-image:url(image/mj_plus_nette.png);
    background-size: cover;
    background-repeat: no-repeat;
}
a{
    color:inherit;
    text-decoration: none;
}

.container{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;

}

.about-media img{
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgb(1, 1, 1);
}

/* NAV */
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
    position: sticky;
    /* background:linear-gradient(180deg, rgba(10,10,10,0.1), rgba(3,3,3,0.6)); */
}
.logo{
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    letter-spacing:2px;
    font-size:20px;
}
.nav-links{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:22px;
}
.nav-links a{
    color:var(--muted);
    text-decoration:none;
    font-weight:500;
}

/* Buttons */
.btn{
    display:inline-block;
    padding:10px 18px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
    transition:all .18s
}
.btn.primary{
    background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
    color:#0b0b0b;
    box-shadow:0 6px 18px rgba(154,158,162,0.08);
}
.btn.outline{
    background:transparent;
    border:1px solid rgba(154,158,162,0.18);
    color:var(--accent-start);
}
.btn.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted);
}
.btn:hover{
    transform:translateY(-2px)
}

/* HERO */
.hero{
    position:relative;
    height:72vh;
    display:flex;
    align-items:center;
}

.hero::before{
	content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    filter:grayscale(15%) contrast(1.02) brightness(.45);
    z-index:0;
}
/* .hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,10,10,0.1), rgba(3,3,3,0.6));
    z-index:1;
} */
.hero-inner{
    position:relative;
    z-index:2;
    padding:60px 0;
}
.hero h1{
    font-size:clamp(28px,5.2vw,54px);
    margin:0 0 12px;
    font-family:'Montserrat',sans-serif;
}
.lead{
    color:white;
    max-width:52ch;
    margin-bottom:18px;
}
.hero-ctas{
    display:flex;
    gap:12px;
}

/* FEATURES */
.img {
  position: relative;
  top: 50px;
}

.features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin: 300px 150px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
}

.feature{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:26px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.03);
}
.feature h3{
    margin-top:0
}
.muted{
    color:var(--muted)
}

/* ABOUT */
.about{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:28px;
    padding:60px 0;
    align-items:center;
}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:20px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.03);
}

/* SHOWCASE */
.showcase{
    padding:60px 0
}
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:18px;
}
.thumb{
    height:160px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--accent-end),rgba(0,0,0,0.15));
    box-shadow:0 6px 20px rgba(0,0,0,0.6);
}

/* FOOTER */
.site-footer{
    border-top:1px solid rgba(255,255,255,0.2);
    padding:28px 0;
    color:var(--muted);
}
.footer-grid{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    flex-direction: row;
}
.credits{
    margin-top:14px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
}

/* Responsive */
@media (max-width: 1280px){
  .mj-image{display: none;}
}

@media (max-width: 1024px){
    .features{margin: 200px 20px 10px;}
    .about-text{margin: 0 0 0 20px;}
}

@media (max-width:920px){ 
	.features{grid-template-columns:1fr;margin: 50px 0px 0px;}
	.grid{grid-template-columns:1fr 1fr}
	.about,.hero-inner{grid-template-columns:1fr;margin: 0 20px;}
}

@media (max-width:600px){
	.nav-links{display:none}
	.grid{grid-template-columns:1fr}
	.hero{height:56vh}
	.hero-inner{padding:30px 0;margin: 0 20px;}
    .features,.about-text{overflow: hidden;margin: 30px 15px 10px;flex-direction: column;}
    .footer-grid{flex-direction: column;}
}