:root{
  --glass-bg: rgba(16,16,18,0.32);
  --glass-ring: rgba(255,255,255,0.10);
  --glass-shadow: 0 20px 60px rgba(0,0,0,0.35);
  --inner-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
                  inset 0 -1px 0 rgba(0,0,0,0.25);
}

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#000;
  color:rgba(255,255,255,0.8);
  overflow:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 100dvh; /* CHANGED: Use dynamic viewport height for proper mobile centering */
}

/* STARFIELD CANVAS BEHIND EVERYTHING */
#particle-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.8;
  pointer-events:none;
}

.content-wrapper{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:1rem;
}

.glass-card{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:520px;
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--glass-ring);
  border-radius:2.5rem;
  text-align:center;
  overflow:hidden;
  box-shadow: var(--glass-shadow), var(--inner-shadow);
  animation:fadeIn 600ms ease-out;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:translateY(0) }
}

.identity-section, .project-section{
  padding:2.5rem;
}

.project-section{
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.10);
  transition:background-color .4s ease;
}

.project-section:hover{
  background:rgba(0,0,0,0.22);
}

.text-primary{ color:rgba(255,255,255,0.95); }
.text-secondary{ color:rgba(255,255,255,0.65); }
.metadata-row{ color:rgba(235,235,245,0.72); }

.app-icon{
  width:88px;
  height:88px;
  border-radius:23.5%;
  box-shadow: 0 0 40px rgba(10,132,255,0.25), 0 10px 25px rgba(0,0,0,0.3);
  transition:transform .4s ease;
}

.project-section:hover .app-icon{
  transform:scale(1.08);
}

.footer{
  position:fixed;
  bottom:1rem;
  left:0;
  width:100%;
  text-align:center;
  color:rgba(255,255,255,0.22);
  font-size:.75rem;
  z-index:10;
}

.footer a{
  color:inherit;
  text-decoration:none;
  transition:color .3s ease;
}

.footer a:hover{
  color:rgba(255,255,255,0.42);
}