/* Reset & base */
* { box-sizing: border-box; margin:0; padding:0 }
html,body { height:100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(180deg,#f3f4f6 0%, #eef2ff 100%); }
.container { max-width:1100px; margin:0 auto; padding:24px; }

/* Header */
.site-header { padding:18px 0; backdrop-filter: blur(6px) saturate(120%); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand { display:flex; align-items:center; gap:14px }
.avatar { width:64px; height:64px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e6edf9,#fff); color:#0f172a; font-weight:700; box-shadow: 0 6px 18px rgba(15,23,42,0.08); }
.title h1 { font-size:1.2rem; margin-bottom:4px }
.subtitle { font-size:0.85rem; color:#475569 }
.nav a { margin-left:14px; color:#0f172a; text-decoration:none; font-weight:600 }
.nav a:hover { color:#374151 }

/* Hero */
.hero { padding:44px 0 }
.hero-inner { display:flex; gap:28px; align-items:stretch }
.hero-card { display:flex; gap:24px; align-items:center; padding:22px; border-radius:20px; box-shadow: 0 8px 30px rgba(2,6,23,0.08); overflow:visible }
.glass { background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.45); backdrop-filter: blur(8px) saturate(140%); }
.hero-left { flex:1 }
.lead { color:#374151; margin-bottom:14px }
.hero-actions { display:flex; gap:12px }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700 }
.btn.primary { background:linear-gradient(180deg,#007aff,#0060d6); color:white; box-shadow: 0 8px 20px rgba(0,96,214,0.15) }
.btn.ghost { background:transparent; border:1px solid rgba(15,23,42,0.06); color:#0f172a }

.hero-right { width:260px }
.device-mockup { display:flex; align-items:center; justify-content:center }
.screen { width:200px; height:420px; border-radius:36px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.6); box-shadow: 0 12px 40px rgba(2,6,23,0.08) }
.glass-blur { background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(240,246,255,0.35)); backdrop-filter: blur(10px) saturate(130%) }
.app-name { position:absolute; bottom:12px; left:12px; font-weight:700; color:#0f172a }
.screen img { width:100%; height:auto; display:block }

/* Sections */
.section { padding:40px 0 }
.projects-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:18px }
.project-card { display:flex; gap:12px; padding:14px; border-radius:14px }
.project-media .thumb { width:72px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:28px }
.skill { display:inline-block; background:linear-gradient(180deg,#fff,#f8fafc); padding:8px 12px; border-radius:999px; margin:8px; font-weight:700 }

/* Contact */
.contact-form { display:flex; flex-direction:column; gap:12px; max-width:540px }
.contact-form input, .contact-form textarea { padding:12px 14px; border-radius:10px; border:1px solid rgba(15,23,42,0.06); background:rgba(255,255,255,0.8) }
.contact-form textarea { min-height:110px }
.form-actions { margin-top:6px }

/* Footer */
.site-footer { padding:28px 0; text-align:center; color:#475569 }

/* Small screens */
@media (max-width:900px){ .hero-inner{flex-direction:column} .hero-right{width:100%}.screen{width:160px;height:340px} }

/* Subtle entrance animations */
.hero-card, .project-card, .skill, .contact-form { transform-origin:center; animation:fadeUp 600ms ease both }
@keyframes fadeUp { from { opacity:0; transform: translateY(18px) scale(.995) } to { opacity:1; transform: translateY(0) scale(1) } }

/* Liquid / glass highlight (animated) */
.screen::before{ content:""; position:absolute; left:-40%; top:-30%; width:200%; height:120%; background: radial-gradient( circle at 30% 20%, rgba(255,255,255,0.5), transparent 10%, transparent 40%), linear-gradient(45deg, rgba(255,255,255,0.06), transparent); transform:rotate(-25deg); animation:liquid 6s infinite linear }
@keyframes liquid { 0%{transform: translateX(-20%) rotate(-25deg)} 50%{transform: translateX(20%) rotate(-25deg)} 100%{transform: translateX(-20%) rotate(-25deg)} }