:root{
  --bg:#0b1220;
  --panel:#0f1724;
  --muted:#9aa7b2;
  --accent:#00BFA6; /* teal */
  --accent-2:#FACC15; /* gold */
  --glass: rgba(255,255,255,0.03);
  --glow: 0 6px 30px rgba(0,191,166,0.14);
  --max-width:1100px;
  --radius:12px;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#E6EEF3;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  line-height:1.55;
}

/* background blobs */
.bg-blobs{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(40px);
  opacity:0.55;
  transform: translateZ(0);
  mix-blend-mode:screen;
}
.b1{width:420px;height:420px;left:-80px;top:-120px;background:linear-gradient(45deg,var(--accent),#0ea5a5);animation:move1 12s ease-in-out infinite;}
.b2{width:360px;height:360px;right:-60px;top:-80px;background:linear-gradient(45deg,#6b21a8,var(--accent-2));animation:move2 14s ease-in-out infinite;}
.b3{width:260px;height:260px;left:20%;bottom:-80px;background:linear-gradient(45deg,#3b82f6,#8b5cf6);animation:move3 16s ease-in-out infinite;}
@keyframes move1{0%{transform:translateY(0)}50%{transform:translateY(20px)}100%{transform:translateY(0)}}
@keyframes move2{0%{transform:translateY(0)}50%{transform:translateY(-25px)}100%{transform:translateY(0)}}
@keyframes move3{0%{transform:translateY(0)}50%{transform:translateY(18px)}100%{transform:translateY(0)}}

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 28px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600}
.nav a:hover{color:var(--accent);}

/* HERO */
.hero{
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:10;
  padding: clamp(30px,6vw,64px);
}
.hero-inner{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  gap:2.25rem;
  align-items:center;
  justify-content:space-between;
}
.hero-text{flex:1; min-width:260px}
.typewriter{font-weight:800; font-size:clamp(28px,5vw,44px); line-height:1;}
.subtitle{color:var(--muted); margin-top:10px; font-weight:500}
.tagline{color:var(--accent-2); margin-top:10px; font-size:0.95rem; font-weight:700}
.hero-cta{margin-top:18px; display:flex; gap:12px}
.btn{
  background:linear-gradient(90deg,var(--accent), #06b6a4);
  color:#07121a;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  box-shadow: var(--glow);
}
.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:none;
}

/* hero card */
.hero-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-card .avatar {
  width: 450px;      
  height: 450px;
  border-radius: 40%; /*circular */
  object-fit: cover;  /* Ensures it crops nicely */
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8); /* Glowing effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-card .avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 255, 255, 1);
}


/* section layout */
.section{padding:48px 20px}
.container{max-width:var(--max-width);margin:0 auto;position:relative;z-index:5}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center}
.about-text h2{color:var(--accent);margin-bottom:10px}
.about-text p{color: #d7e6ea}
.muted{color:var(--muted);font-size:0.95rem}
.hobby-carousel {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 25px #6b21a8; /* purple glow */
}
.carousel-img{width:100%;height:300px;object-fit:cover;display:none}

/* SKILLS */
.skills-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
}
.skill-card{
  background:var(--panel);
  border-radius:12px;
  padding:18px;
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,0.02);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor:default;
}

.skill-card i{font-size:28px; width:40px; height:40px; display:flex; align-items:center; justify-content:center;}
.skill-card span{font-weight:600;color:#dbeef5}
.skill-card:hover{
  transform:translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,191,166,0.12), 0 2px 10px rgba(250,202,21,0.06);
  border-color: rgba(0,191,166,0.18);
}
/* multi-colored devicon support */
.devicon-python-plain.colored{color:#ffd43b}
.devicon-javascript-plain.colored{color:#f0db4f}
.devicon-html5-plain.colored{color:#e34f26}
.devicon-css3-plain.colored{color:#2965f1}
.devicon-kotlin-plain.colored{color:#7f52ff}

/* project grid */
.projects-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:18px;
}
.project-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,0.03);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 18px 60px rgba(0,191,166,0.08);
  border-color: rgba(250,202,21,0.08);
}
.proj-thumb {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.proj-body{padding:14px}
.proj-links{margin-top:10px; display:flex; gap:8px}
.proj-links a{color:var(--accent-2); text-decoration:none; font-weight:700}
.proj-links a.disabled{opacity:0.5; pointer-events:none}

/* contact */
.contact-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;margin-top:16px}
.contact-card{background:var(--panel);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.socials a{color:var(--muted); font-size:20px; margin-right:8px}
.contact-form{background:var(--panel);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:10px}
.contact-form input, .contact-form textarea{
  background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;color:#e6f6f8;
}
.contact-form button{align-self:flex-start}

/* footer */
.footer{padding:22px;text-align:center;color:var(--muted);margin-top:28px}

/* small screens */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .nav-right{display:none}
  .hero-inner{flex-direction:column;gap:18px}
  .hero-card{order:-1}
  .contact-grid{grid-template-columns:1fr}
}

/* fade-up animation util */
.fade-up{opacity:0; transform: translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.fade-up.inview{opacity:1; transform: translateY(0)}