/* Basic Reset & Fonts */
* { box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background: linear-gradient(180deg,#f6f7fb,#eef2f6);
    color: #111827;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* Layout */
.container { max-width: 1000px; margin: 0 auto; padding: 2rem; }
.section { padding-top: 2rem; padding-bottom: 2rem; }

/* Navbar */
.navbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 1.5rem;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.logo { font-weight: 600; font-size: 1.1rem; }
.nav-links a { margin: 0 0.8rem; color: #111827; text-decoration: none; }
.nav-links a:hover { color: #ff7a18; }
.right-controls { display:flex; align-items:center; gap:0.6rem; }
#darkModeToggle { background:none; border: none; cursor:pointer; font-size:1.1rem; }
.mobile-only { display:none; border:none; background:none; cursor:pointer; font-size:1.2rem; }

/* Mobile nav */
.mobile-nav { display:none; flex-direction:column; background:#fff; padding:1rem; border-bottom:1px solid rgba(0,0,0,0.06); }
.mobile-nav a { padding:0.6rem 0; text-decoration:none; color:#111827; }

/* Hero */
.hero { padding:3rem 0; }
.hero-inner { display:grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: center; }
.hero-text h1 { margin:0 0 0.5rem 0; font-size:2rem; }
.sub { margin:0 0 1rem 0; color:#374151; }
.hero-card .card-inner { background:#fff; padding:1rem; border-radius:10px; box-shadow:0 8px 20px rgba(18,22,31,0.06); }
.hero-cta { display:flex; gap:0.6rem; margin-top:1rem; }

.btn {
    display:inline-block; background:#111827; color:#fff; padding:0.6rem 1rem; border-radius:8px; text-decoration:none;
    border:none; cursor:pointer;
}
.btn.ghost { background:transparent; color:#111827; border:1px solid rgba(17,24,39,0.08); }
.btn:hover { transform:translateY(-2px); transition:all 180ms ease; }

/* Skills */
.skills-grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.8rem; }
.skills-grid li { background:#fff; padding:0.8rem; border-radius:8px; box-shadow:0 6px 18px rgba(18,22,31,0.04); text-align:center; }

/* Projects */
.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.card { background:#fff; padding:1.2rem; border-radius:10px; box-shadow:0 8px 20px rgba(18,22,31,0.06); }
.card h3 { margin-top:0; }
.tech { font-size:0.85rem; color:#6b7280; margin-top:0.6rem; }

/* Contact form */
form { display:flex; flex-direction:column; gap:0.6rem; max-width:640px; }
input, textarea { padding:0.7rem; border-radius:8px; border:1px solid rgba(17,24,39,0.08); }
.form-note { font-size:0.85rem; color:#6b7280; margin-top:0.4rem; }

/* Footer */
footer { padding:1.2rem 0; background:transparent; color:#374151; border-top:1px solid rgba(0,0,0,0.04); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }

/* Scroll to Top */
#scrollTopBtn { position:fixed; right:20px; bottom:20px; background:#ff7a18; color:white; border:none; padding:0.6rem 0.8rem; border-radius:8px; display:none; cursor:pointer; box-shadow:0 8px 18px rgba(17,24,39,0.12); }

/* AOS tweak */
[data-aos] { opacity:0; transition:opacity 0.4s ease, transform 0.4s ease; }
[data-aos].aos-animate { opacity:1; }

/* Dark mode */
.dark-mode { background: #0b1220; color:#e6eef8; }
.dark-mode .navbar { background: rgba(4,6,10,0.6); }
.dark-mode .container, .dark-mode .card, .dark-mode .skills-grid li, .dark-mode .hero-card .card-inner { background: #0f1724; color: #cfe3ff; border: 1px solid rgba(255,255,255,0.03); box-shadow:none; }
.dark-mode .btn { background:#e6eef8; color:#0b1220; }
.dark-mode a { color:#93c5fd; }

/* Responsive */
@media (max-width: 880px) {
    .hero-inner { grid-template-columns: 1fr; }
    .mobile-only { display:inline-block; }
    .nav-links { display:none; }
    .hero { padding:2rem 0; }
}

@media (max-width: 520px) {
    .hero-text h1 { font-size:1.4rem; }
    .hero-card { order: -1; }
    .container { padding:1rem; }
}