:root{
--bg:#1e2226;
--panel:#111216;
--muted:#9aa1a6;
--accent:#1778ff;
--soft:#2a2f33;
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial; background:linear-gradient(90deg, rgb(20, 36, 51) 0%, rgba(31,34,37,1) 100%); color:#fff;}
.site-wrap{min-height:100vh; padding:2.5rem 3rem;}
.nav-top{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;margin-bottom:2rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:#e6eefc}
.brand .tag{background:transparent;padding:.2rem .5rem;border-radius:6px;color:var(--accent);}


/* hero */
.hero{position:relative;padding:3rem 0}
.hero-left{padding-right:2rem}
.hero h1{font-size:3.2rem;line-height:1; font-weight:800; margin-bottom:1rem}
.hero p.lead{color:var(--muted);max-width:52ch}


/* center profile */
.profile-frame{position:relative;display:flex;align-items:center;justify-content:center}
.profile-img{width:420px;height:520px;object-fit:cover;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.6);border:6px solid rgba(255,255,255,.02)}
.profile-overlay{position:absolute;inset:0;border-radius:12px;pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.6)}


/* right sidebar */
.sidebar{padding-left:2rem;border-left:1px solid rgba(255,255,255,.03)}
.sidebar h5{letter-spacing:.08em}
.muted{color:var(--muted);font-size:.95rem}
.link-cta{display:inline-block;margin-top:.6rem;text-decoration:none;color:#fff;border-bottom:2px solid rgba(255,255,255,.06);padding-bottom:.2rem}


/* floating down button */
.down-cta{position:absolute;left:3rem;bottom:3rem;width:84px;height:84px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(23,120,255,.18);border:6px solid rgba(255,255,255,.02)}
.down-cta i{font-size:28px;color:#fff}


/* social icons */
.socials a{display:inline-block;margin-right:.8rem;opacity:.95}

.contact-btn {
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
  font-size: 1rem;
}

.email-btn {
  background: var(--accent);
}
.email-btn:hover {
  background: #0f63d2;
  transform: translateY(-2px);
}

.whatsapp-btn {
  background: #25d366;
}
.whatsapp-btn:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

#Pic{
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  border-radius: 20px; 
}

#Pic:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#Pic2{
  opacity: .8;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  border-radius: 20px; 
}

#Pic2:hover {
  transform: scale(.95);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


/* responsive tweaks */
@media (max-width:991px){
.profile-img{width:320px;height:380px}
.hero h1{font-size:2.4rem}
.sidebar{border-left:none;padding-left:0;margin-top:2rem}
.down-cta{left:1.5rem}
}
@media (max-width:575px){
.nav-top{padding:0}
.brand span{display:none}
.hero{padding:1rem 0}
.profile-img{width:260px;height:320px}
}