/* index.css */
:root{ --bg:#0b0b0b; --panel:#131313; --muted:#bdbdbd; --accent:#ff6b00; --glass: rgba(255,255,255,0.03); --card-shadow: 0 8px 30px rgba(0,0,0,0.6); --radius:12px; --max-width:1100px; }
*{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial; background: linear-gradient(180deg,var(--bg), #070707 120%); color:#e9e9e9; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; line-height:1.5; }
header{ position:sticky; top:0; z-index:1100; background: linear-gradient(180deg, rgba(11,11,11,0.85), rgba(11,11,11,0.6)); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.03); }
.nav{ max-width:var(--max-width); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img{width:44px;height:44px;border-radius:10px;border:2px solid var(--accent);object-fit:cover}
.brand .name{font-weight:700; letter-spacing:0.2px}
nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center}
nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:0.95rem; padding:6px 8px; border-radius:8px}
nav a:hover{color:var(--accent); background:var(--glass)}

.hero{ max-width:var(--max-width); margin:36px auto 18px; display:grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap:28px; align-items:start; padding:28px; }
.hero-card{ background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); border-radius:var(--radius); padding:34px; box-shadow:var(--card-shadow); border:1px solid rgba(255,255,255,0.03); min-height:400px; display:flex; flex-direction:column; justify-content:center; }
.hero-card h1{color:var(--accent); margin:0 0 12px; font-size:2.1rem; line-height:1.2}
.hero-card h2{margin:0 0 16px; font-weight:600; color:#f3f3f3; line-height:1.3}
.hero-card p{color:var(--muted); margin:0 0 20px; line-height:1.6; max-width:none}
.hero-ctas{margin:20px 0; display:flex; gap:12px; flex-wrap:wrap}
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; transition:all 0.3s ease; }
.btn-primary{background:var(--accent); color:#111; box-shadow:0 6px 20px rgba(255,107,0,0.12)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,107,0,0.2)}
.btn-ghost{border:1px solid rgba(255,255,255,0.06); color:var(--muted); background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.hero-photo{ display:flex; justify-content:center; align-items:center; position:sticky; top:100px; }
.profile-photo{ width:100%; max-width:300px; height:300px; border-radius:18px; object-fit:cover; border:4px solid rgba(255,107,0,0.18); box-shadow:0 12px 40px rgba(0,0,0,0.6) }

section{padding:70px 20px}
.container{max-width:var(--max-width); margin:0 auto}
h2.section-title{color:var(--accent); text-align:center; margin-bottom:20px; font-size:1.9rem}

.projects-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:20px; }
.project-card{ background:linear-gradient(180deg,#111,#0f0f0f); border-radius:14px; padding:18px; cursor:pointer; transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease; border:1px solid rgba(255,255,255,0.03); box-shadow: 0 6px 20px rgba(0,0,0,0.5); opacity:0; transform:translateY(10px); }
.project-card.show{ opacity:1; transform:none }
.project-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.project-card h3{margin:6px 0 8px; color:#fff}
.project-meta{font-size:0.9rem; color:var(--muted); margin-bottom:10px}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:0.78rem; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.03); color:var(--muted)}

.modal-backdrop{ position:fixed; inset:0; background:rgba(3,3,3,0.55); display:none; align-items:center; justify-content:center; z-index:1400; padding:20px; }
.modal{ width:100%; max-width:900px; background:linear-gradient(180deg,#0f0f0f,#0b0b0b); border-radius:14px; padding:22px; border:1px solid rgba(255,255,255,0.04); box-shadow:0 30px 80px rgba(0,0,0,0.7); transform:scale(.96); opacity:0; transition:opacity .22s ease, transform .22s ease; }
.modal.open{ transform:none; opacity:1 }

.modal .close{float:right; color:var(--muted); cursor:pointer; font-size:1.05rem}
.modal h3{color:var(--accent); margin-top:6px}
.modal .modal-body{display:grid; grid-template-columns: 1fr 320px; gap:18px; margin-top:12px}
.modal .screenshot{width:100%; height:220px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,0.03)}
.modal .details p{color:var(--muted)}
.modal .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.meta .chip{padding:8px 10px; border-radius:999px; background:rgba(255,255,255,0.02); color:var(--muted); font-weight:600; font-size:0.85rem}

.back-to-top{ position:fixed; right:20px; bottom:26px; z-index:1300; display:none; width:52px;height:52px;border-radius:12px; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--accent), #e55a00); color:#111; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,0.5) }

.contact-center { text-align: center; max-width: 600px; margin: 0 auto; }
.contact-line { color: var(--muted); font-size: 1.1rem; margin-bottom: 30px; }
.socials { display: flex; justify-content: center; gap: 25px; }
.socials a { color: var(--accent); font-size: 2rem; text-decoration: none; transition: color 0.3s, transform 0.3s; }
.socials a:hover { color: #fff; transform: scale(1.15); }

@media (max-width:1024px){ .hero{grid-template-columns:1fr; gap:20px; text-align:center} .hero-card{min-height:auto} .hero-photo{position:static; margin-top:20px} .profile-photo{max-width:250px; height:250px} }
@media (max-width:768px){ .hero{padding:20px} .hero-card{padding:24px} .hero-card h1{font-size:1.8rem} .hero-card h2{font-size:1.2rem} .modal .modal-body{grid-template-columns:1fr} .modal .screenshot{height:180px} .nav{padding:12px 20px} .projects-grid{grid-template-columns:1fr; gap:16px} }
@media (max-width:560px){ nav ul{display:none} .brand .name{display:none} .hero{padding:16px} .hero-card{padding:20px} .hero-ctas{justify-content:center} .btn{padding:10px 16px; font-size:0.9rem} .profile-photo{max-width:200px; height:200px} }
@media (max-width:480px){ .hero-card h1{font-size:1.6rem} .hero-card h2{font-size:1.1rem} .hero-ctas{flex-direction:column; align-items:center} .btn{width:100%; max-width:200px; justify-content:center} }