*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#e5e7eb;background:#020617;font-family:Arial,Helvetica,sans-serif}.app{min-height:100vh}.navbar{justify-content:space-between;align-items:center;max-width:1200px;margin:auto;padding:24px;display:flex}.navbar h2{color:#fff}.navbar a{color:#cbd5e1;margin-left:24px;font-size:14px;text-decoration:none}.navbar a:hover{color:#38bdf8}.hero{grid-template-columns:1.4fr .8fr;align-items:center;gap:40px;max-width:1200px;margin:auto;padding:90px 24px;display:grid}.tag{color:#38bdf8;margin-bottom:18px;font-weight:700}.hero h1{color:#fff;margin-bottom:24px;font-size:56px;line-height:1.1}.hero p{color:#cbd5e1;font-size:18px;line-height:1.7}.buttons{gap:16px;margin-top:32px;display:flex}.primary,.secondary{border-radius:12px;padding:14px 22px;font-weight:700;text-decoration:none}.primary{color:#020617;background:#38bdf8}.secondary{color:#38bdf8;border:1px solid #38bdf8}.hero-card,.card,.timeline-item,.contact{background:#1e293bbf;border:1px solid #94a3b840;border-radius:22px;box-shadow:0 20px 50px #0000004d}.hero-card{padding:30px}.hero-card h3{color:#fff;margin-bottom:20px}.hero-card p{margin-bottom:14px;font-size:15px}.section{max-width:1200px;margin:auto;padding:70px 24px}.section h2{color:#fff;margin-bottom:28px;font-size:36px}.section>p{color:#cbd5e1;max-width:900px;font-size:18px;line-height:1.8}.grid{grid-template-columns:repeat(4,1fr);gap:22px;display:grid}.card{padding:26px;transition:all .3s}.card:hover{border-color:#38bdf8;transform:translateY(-6px)}.card h3{color:#fff;margin-bottom:14px}.card p{color:#cbd5e1;line-height:1.7}.timeline{gap:18px;display:grid}.timeline-item{border-left:4px solid #38bdf8;padding:24px}.timeline-item h3{color:#fff;margin-bottom:8px}.timeline-item p{color:#38bdf8}.timeline-item span{color:#94a3b8}.skills{flex-wrap:wrap;gap:12px;display:flex}.skills span{color:#e2e8f0;background:#1e293b;border:1px solid #334155;border-radius:999px;padding:10px 15px}.contact{padding:35px}.contact p{margin-bottom:12px}footer{text-align:center;color:#64748b;padding:35px}@media (width<=900px){.hero{grid-template-columns:1fr}.hero h1{font-size:40px}.grid{grid-template-columns:1fr}.navbar{display:block}.navbar div{margin-top:15px}.navbar a{margin-left:0;margin-right:16px}}