body {
    margin: 0;
    font-family: 'Courier New', monospace;
    background: radial-gradient(circle at top, #0b1220, #05070d);
    color: #e5e7eb;
}

.topbar {
    display:flex;
    justify-content:space-between;
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

.logo {
    color:#22d3ee;
    font-weight:bold;
}

nav a {
    margin-left:15px;
    color:#cbd5e1;
    text-decoration:none;
}

.hero {
    height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.typewriter {
    overflow:hidden;
    border-right:2px solid #22d3ee;
    white-space:nowrap;
    width:0;
    animation: typing 2.5s steps(30,end) forwards, blink 0.8s infinite;
}

@keyframes typing {
    from { width:0 }
    to { width:100% }
}

@keyframes blink {
    50% { border-color:transparent; }
}

.buttons {
    margin-top:20px;
}

.btn {
    padding:10px 16px;
    margin:5px;
    border:1px solid rgba(255,255,255,0.2);
    text-decoration:none;
    color:white;
    display:inline-block;
}

.btn.primary {
    background:#22d3ee;
    color:#000;
}

.btn.secondary {
    background:transparent;
}