body { margin:0; font-family: Arial, sans-serif; line-height:1.6; }
header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:rgba(255,255,255,0.9); position:sticky; top:0; border-bottom:1px solid #ddd; }
header h1 { font-size:1.5rem; font-weight:bold; }
.btn, .btn-primary { padding:0.7rem 1.2rem; border-radius:30px; text-decoration:none; display:inline-block; transition:0.3s; }
.btn { border:1px solid #333; color:#333; }
.btn:hover { background:#f1f1f1; }
.btn-primary { background:#38bdf8; color:#fff; border:none; }
.btn-primary:hover { background:#0ea5e9; }
.hero { height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(90deg, rgba(56,189,248,0.2), rgba(139,92,246,0.2)); z-index:-1; }
.hero h2 { font-size:3rem; font-weight:800; }
.hero p { max-width:700px; margin-top:1rem; }
.hero-buttons, .hero-links { margin-top:2rem; display:flex; gap:1rem; justify-content:center; }
.experience { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:4rem 2rem; max-width:1200px; margin:auto; }
.card { background:#fff; padding:2rem; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,0.05); transition:0.3s; }
.card:hover { transform:scale(1.05); }
.skills { background:#0f172a; color:#fff; padding:4rem 2rem; text-align:center; }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1rem; margin-top:2rem; }
.skill { background:#1e293b; padding:1.5rem; border-radius:12px; }
.projects { padding:4rem 2rem; max-width:1200px; margin:auto; text-align:center; }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem; margin-top:2rem; }
.project img { width:100%; border-radius:12px; transition:0.3s; }
.project:hover img { transform:scale(1.05); }
.project { background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.05); overflow:hidden; padding-bottom:1rem; }
.contact { padding:4rem 2rem; background:linear-gradient(135deg, #f0f9ff, #f5f3ff); text-align:center; }
.contact form { display:grid; gap:1rem; max-width:600px; margin:auto; }
.contact input, .contact textarea { padding:1rem; border:1px solid #ccc; border-radius:8px; font-size:1rem; }
footer { text-align:center; padding:1.5rem; background:#f9fafb; font-size:0.9rem; }
.dark { background:#0f172a; color:#f1f5f9; }
.cursor-dot { width:12px; height:12px; border-radius:50%; background:#38bdf8; position:fixed; pointer-events:none; transform:translate(-50%,-50%); z-index:9999; }
.cursor-outline { width:36px; height:36px; border-radius:50%; border:2px solid #38bdf8; position:fixed; pointer-events:none; transform:translate(-50%,-50%); z-index:9998; }
.reveal { opacity:0; transform:translateY(20px); transition:all 0.6s ease; }
.reveal.active { opacity:1; transform:translateY(0); }