*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f5f0;--bg-card:#fff;--bg-subtle:#f0ece4;--text:#1e1e1e;--text-muted:#6b6b6b;--text-faint:#a09b95;--accent:#7c5cff;--accent-light:#ede9ff;--accent-hover:#6a49f0;--border:#e5e0d8;--radius:10px;--radius-lg:16px;--font:"Plus Jakarta Sans", sans-serif;--mono:"JetBrains Mono", monospace}html,body,#root{height:100%;margin:0}.app-container{flex-direction:column;min-height:100vh;display:flex}.app-content{flex:1}.container{width:90%;max-width:1100px;margin:0 auto;padding:80px 0}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6}.container{max-width:1100px;margin:0 auto;padding:0 2rem}.container.hero-container{justify-content:flex-start;align-items:center;gap:3rem;max-width:1400px;padding-right:0;display:flex}nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:9999;background:#f8f5f0e6;width:100%;position:fixed;top:0}.nav-inner{justify-content:space-between;padding:1rem 2rem;display:flex}.nav-logo{color:var(--text);font-weight:700;text-decoration:none}.nav-links{gap:1.5rem;list-style:none;display:flex}.nav-links a{color:var(--text-muted);font-size:14px;text-decoration:none}.nav-links a:hover{color:var(--text)}.nav-link-btn{color:var(--text-muted);background:0 0;border-radius:20px;align-items:center;gap:6px;padding:8px 14px;font-weight:500;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.nav-icon{font-size:1.2rem;transition:transform .3s}.nav-label{opacity:0;white-space:nowrap;max-width:0;font-size:14px;transition:all .3s;overflow:hidden}.nav-link-btn:hover{background:var(--bg-subtle);color:var(--accent)}.nav-link-btn:hover .nav-label{opacity:1;max-width:100px;margin-left:4px}.nav-link-btn:hover .nav-icon{transform:scale(1.1)}.nav-link-btn.active{color:var(--accent);background:var(--accent-light)}.hero{justify-content:center;align-items:center;min-height:100vh;padding-top:0;display:flex}.hero-layout{justify-content:space-between;align-items:center;gap:4rem;display:flex}.hero-content{text-align:left;flex:1}.hero-heading{margin-bottom:1.5rem;font-size:3.5rem;line-height:1.1}.hero-image{flex:1;justify-content:flex-end;display:flex}.hero-image img{border-radius:var(--radius-lg);width:100%;max-width:450px;height:auto;box-shadow:0 20px 40px #0000000d}.hero-narrative{color:var(--text-muted);margin-bottom:2rem}.hero-text-block{text-align:left;flex-direction:column;flex:1;justify-content:center;display:flex}.hero-text-block .cta-row{justify-content:flex-start}.hero-image-block{flex:1;justify-content:center;align-items:center;display:flex}.hero-name{font-family:var(--mono);text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:.5rem;font-size:14px;font-weight:600;animation:.8s ease-out forwards fadeInDown}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.hero-heading{margin-top:0}.hero-summary{background:var(--bg-card);border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;max-width:550px;margin-bottom:2.5rem;padding:1.2rem;animation:1s ease-out fadeIn;box-shadow:0 4px 12px #00000008}.hero-summary p{color:var(--text-muted);margin:0;font-size:15px;line-height:1.7}.hero-summary strong{color:var(--text);font-weight:600}.masked-image{object-fit:cover;border:4px solid var(--accent);border-radius:50%;width:500px;height:500px;transition:all .3s;box-shadow:0 0 0 6px #7c5cff26,0 0 30px #7c5cff66}.masked-image:hover{transform:scale(1.05);box-shadow:0 0 0 6px #7c5cff40,0 0 40px #7c5cff99}.cta-row{gap:12px;display:flex}.btn{border-radius:var(--radius);cursor:pointer;padding:.7rem 1.4rem;font-size:14px;font-weight:600;text-decoration:none}.btn-primary{background:var(--accent);color:#fff;transition:all .3s}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}.btn-secondary{border:1px solid var(--border);background:#fff}.project-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);padding:1.5rem;transition:all .3s}form{flex-direction:column;gap:1rem;margin-top:1.5rem;display:flex}input,textarea{border:1px solid var(--border);border-radius:var(--radius);padding:.7rem}button{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:.7rem}.footer-wrap{border-top:1px solid var(--border);background:var(--bg-main);margin-top:4rem}.footer-inner{justify-content:space-between;align-items:center;width:100%;padding:1.5rem clamp(40px,6vw,96px);display:flex}.footer-left-name{font-weight:600}.footer-left-tag{color:var(--text-muted);font-size:13px}.footer-links{gap:1.2rem;display:flex}.footer-links a{color:var(--text-muted);text-decoration:none;transition:all .3s}.footer-links a:hover{color:var(--accent);transform:translateY(-1px)}.footer-bottom{text-align:center;color:var(--text-faint);margin-top:0;padding:.5rem 0 1rem;font-size:13px}@media (width<=800px){.container.hero-container{text-align:center;flex-direction:column-reverse;gap:1rem;padding:0 2rem}.hero-text-block{text-align:center;padding:2rem 0}.hero-text-block .cta-row,.hero-image-block{justify-content:center}.hero-heading{font-size:2.2rem}.nav-links{gap:1rem}}.contact-form{flex-direction:column;gap:1.5rem;max-width:750px;margin:0 auto;display:flex}.form-input,.form-textarea{border:1px solid var(--border);background:#fff;border-radius:14px;width:100%;padding:18px 20px;font-size:15px}.contact-form{grid-template-columns:1fr 1fr;gap:1.5rem;max-width:800px;display:grid}.contact-form textarea,.contact-form button{grid-column:span 2}.form-input:focus,.form-textarea:focus{border-color:var(--accent);background:#fff;outline:none;box-shadow:0 0 0 2px #7c5cff33}.contact-form .btn{background:linear-gradient(90deg,#7c5cff,#6a49f0);border-radius:16px;width:100%;padding:18px;font-size:16px;font-weight:600}.contact-title{color:var(--text);margin-bottom:2.5rem;font-size:2.8rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.about-section{text-align:center;padding:140px 0 80px}.about-intro{margin-bottom:4rem}.about-intro h1{color:var(--text);font-size:3rem;font-weight:700}.about-tagline{color:var(--text-muted);margin-top:.6rem;font-size:1.05rem}.about-wrapper{padding:0 120px}.about-grid{background:var(--bg-card);border:1px solid var(--border);text-align:left;border-radius:20px;grid-template-columns:2fr 1fr;gap:60px;max-width:1200px;margin:0 auto;padding:50px 60px;display:grid;box-shadow:0 10px 35px #0000000f}.about-left p{color:var(--text-muted);margin-bottom:1.8rem;font-size:1.02rem;line-height:1.9}.about-right{border-left:1px solid var(--border);padding-left:30px}.about-right h3{margin-top:1.5rem;margin-bottom:1rem}.about-right ul{margin-bottom:1.5rem;padding-left:18px}.about-right li{color:var(--text-muted);margin-bottom:.8rem;line-height:1.6}.about-links{flex-wrap:wrap;gap:12px;display:flex}.about-links a{color:var(--text-muted);text-decoration:none;transition:all .25s}.about-links a:hover{color:var(--accent)}@media (width<=768px){.about-wrapper{padding:0 20px}.about-grid{grid-template-columns:1fr;gap:30px;padding:30px}.about-right{border-left:none;padding-left:0}}.portfolio{text-align:center;padding:120px 0 80px}.portfolio-wrapper{padding:0 clamp(40px,6vw,96px)}.portfolio h1{margin-bottom:2.5rem}.projects-grid{grid-template-columns:repeat(2,1fr);gap:2rem;display:grid}.project-card{background:var(--bg-card);border:1px solid var(--border);text-align:left;border-radius:16px;padding:1.8rem;transition:all .3s;overflow:hidden}.project-content h3{margin-bottom:.4rem}.project-content p{color:var(--text-muted);font-size:14px}.project-links{gap:12px;margin-top:1rem;display:flex}.project-links a{color:var(--accent);font-size:13px;font-weight:500;text-decoration:none}.project-links a:hover{text-decoration:underline}.project-header{justify-content:space-between;align-items:center;display:flex}.status{align-items:center;gap:6px;font-size:12px;font-weight:500;display:flex}.dot{border-radius:50%;width:8px;height:8px}.status.live .dot{background:#22c55e}.status.not-live .dot{background:#ef4444}.project-time{color:var(--text-faint);margin:6px 0 10px;font-size:13px}.project-desc{color:var(--text-muted);font-size:14px;line-height:1.5}.project-image{object-fit:cover;border-radius:12px;width:100%;height:180px;margin-bottom:1rem;transition:all .4s}.project-card{transition:all .3s;overflow:hidden}.project-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px #00000014}.project-card:hover .project-image{transform:scale(1.05)}.contact-title{color:var(--text);text-align:center;margin-bottom:2.5rem;font-size:2.8rem}.contact-form{grid-template-columns:1fr 1fr;gap:1.5rem;max-width:700px;margin:0 auto;display:grid}.form-input,.form-textarea{background:#eaeaea;border:none;border-radius:14px;width:100%;padding:18px 20px;font-size:15px}.form-textarea,.contact-form .btn{grid-column:span 2}.form-textarea{resize:none;height:160px}.contact-form .btn{background:linear-gradient(90deg,#7c5cff,#6a49f0);border-radius:16px;padding:18px;font-size:16px;font-weight:600}.form-input:focus,.form-textarea:focus{background:#fff;outline:none;box-shadow:0 0 0 2px #7c5cff33}.toast{color:#fff;border-radius:10px;padding:14px 20px;font-size:14px;animation:.3s slideIn;position:fixed;bottom:30px;right:30px;box-shadow:0 10px 25px #0003}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.admin-dashboard{text-align:center;padding:100px 40px}.admin-cards{justify-content:center;gap:2rem;margin-top:40px;display:flex}.admin-card{cursor:pointer;background:#f5f5f5;border-radius:16px;width:250px;padding:30px;transition:all .2s}.admin-card:hover{background:#ece9ff;transform:translateY(-5px)}.admin-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.logout-btn{color:#fff;cursor:pointer;background:#ff4d4f;border:none;border-radius:8px;padding:8px 14px}.logout-btn:hover{background:#d9363e}.admin{background:var(--bg);padding:80px 40px}.admin-container{background:var(--bg);height:75vh;display:flex}.admin-sidebar{width:260px;padding:10px 0}.message-item{cursor:pointer;padding:14px 18px;transition:all .2s}.message-item:hover{background:#0000000d}.message-item.active{background:#6c5ce726}.message-item h4{margin:0;font-size:.95rem}.message-item .preview{color:#666;margin-top:4px;font-size:.8rem}.admin-divider{background:#ccc;width:1px;margin:0 10px}.admin-content{flex:1;padding:20px 40px}.message-view h2{margin-bottom:5px}.email{color:#666}.date{color:#999;margin-bottom:20px;font-size:12px}.message-body{margin-bottom:20px;font-size:1rem;line-height:1.6}.admin-topbar{margin-bottom:10px}.back-btn{color:#6c5ce7;cursor:pointer;background:0 0;border:none;padding:6px 12px;font-size:.9rem}.back-btn:hover{text-decoration:underline}.empty-state{color:#777;margin-top:50px}.modal-overlay{z-index:9999;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-box{background:#fff;border-radius:16px;width:320px;max-width:90%;padding:30px;animation:.2s popIn;box-shadow:0 20px 50px #00000040}.modal-actions{justify-content:center;gap:12px;margin-top:20px;display:flex}.cancel-btn{cursor:pointer;background:#ccc;border:none;border-radius:10px;padding:10px 16px}.delete-btn{color:#fff;cursor:pointer;background:#ff4d4d;border:none;border-radius:10px;padding:10px 16px}.delete-btn:hover{opacity:.9}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.admin-projects{padding:100px 40px}.add-btn{color:#fff;background:#7c5cff;border:none;border-radius:8px;margin-bottom:20px;padding:10px 16px}.project-row{border-bottom:1px solid #ddd;justify-content:space-between;padding:15px;display:flex}.back-btn{color:#fff;cursor:pointer;background:#6c5ce7;border:none;border-radius:8px;margin-bottom:15px;padding:8px 14px;font-size:.9rem}.back-btn:hover{opacity:.9}.toast{color:#fff;border-radius:10px;padding:12px 16px;font-size:.9rem;animation:.3s fadeIn;position:absolute;bottom:20px;right:20px}.toast.success{background:#28a745}.toast.error{background:#dc3545}