:root{
 --bg:#fff;
 --text:#222;
 --accent:#ff014f;
}
.dark{
 --bg:#111;
 --text:#eee;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}
body{background:var(--bg);color:var(--text)}
.container{width:90%;max-width:1100px;margin:auto}

.header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid #eee}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:15px}
.nav a{margin-left:15px;text-decoration:none;color:var(--text)}
#menuBtn{display:none}

.hero{height:90vh;display:flex;align-items:center}

.typing span{
 color:var(--accent);
 border-right:2px solid var(--accent);
 padding-right:5px;
 animation:blink .8s infinite;
}
@keyframes blink{50%{border-color:transparent}}

.btn{
 display:inline-block;
 margin-top:20px;
 padding:12px 30px;
 background:var(--accent);
 color:#fff;
 border-radius:30px;
 text-decoration:none;
}

.section{padding:80px 0}
.gray{background:#f5f5f5}
.dark .gray{background:#1a1a1a}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{
 padding:30px;
 border-radius:10px;
 background:var(--bg);
 box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.inbio-card{
 transition:.4s;
}
.inbio-card:hover{
 transform:translateY(-12px);
 box-shadow:0 30px 60px rgba(255,1,79,.25);
}

.fade{opacity:0;transform:translateY(40px)}
.fade.show{opacity:1;transform:none;transition:.8s}

.footer{text-align:center;padding:20px;background:#000;color:#fff}

@media(max-width:768px){
 #menuBtn{display:block}
 .nav{display:none;flex-direction:column}
 .nav.active{display:flex}
}